jQuery.animate(...) 不能正常工作
[英]jQuery.animate(…) is not working properly
問題描述
我想創建一個簡單的頁面，下面有 snap（到元素）滾動頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.js"></script> <style type="text/css"> .indexPnl{ margin-top:200px; max-height:500px; overflow-y:auto; scroll-snap-type: y mandatory; position:absolute;} .indexPnl, .indexPnl li{ list-style: none; } .indexPnl img{ width:100px; scroll-snap-align:start;} .body{ padding: 200px; } .body img{ width: 500px; } .page{ width:100%; height:100%; scroll-snap-align:start;} .bodyPnl { overflow-y: auto; position:fixed; top:0px; left:0px; height:100%; width:100%; scroll-snap-type: y mandatory; } </style> <script type="text/javascript"><!-- $(document).ready(function(){ $('.body').find('img').css('cursor', 'pointer').on('click', function(){ var selector=$(this).attr('target'); console.log('Going to page: '+selector); $('.bodyPnl').animate({'scrollTop': $(selector).position().top}, 800, function(){ console.log('DONE'); }); }); }); //--></script> </head> <body> <div class="bodyPnl"> <div class="page"> <ul class="indexPnl"> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> </ul> <div class="body"> <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" target=".page:eq(1)"/> </div> </div> <div class="page" > <ul class="indexPnl"> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> </ul> <div class="body"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQbYQSFdhlvD9_Inot8wimKt2hdMVXe1KLgog&usqp=CAU" target=".page:eq(2)"/> </div> </div> <div class="page" > <ul class="indexPnl"> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> <li><img src="https://png.pngtree.com/png-clipart/20190520/original/pngtree-expression-good-polar-bear-illustration-cartoon-polar-bear-png-image_3885385.jpg"/></li> </ul> <div class="body"> <img src="https://cdn4.vectorstock.com/i/1000x1000/55/13/abstract-golden-holiday-background-bokeh-effect-vector-5995513.jpg" target=".page:first"/> </div> </div> </div> </body> </html>
我的問題是：
- 平滑滾動動畫不起作用（即使我刪除了所有不必要的代碼）；
- 第二次點擊無法滾動到第 3 頁（我嘗試過 offset() 和 position()，兩者都無法正常工作；
PS：我試過，jQuery.scrollTo(..)，插件，但動畫仍然不能正常工作。
下面的代碼工作正常，但我可以找到不同之處.....
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <style> #body{ width:800px; height:800px; overflow-y:auto; } </style> </head> <body> <div id="body"> <div class="target" style="width:500px; height:500px; background-color:blue; opacity:1;"> </div> <button type="button" class="btn">Action</button> <div style="height:1000px;"> </div> <div class="target2" style="width:500px; height:500px; background-color:blue; opacity:1;"> </div> </div> </body> <script type="text/javascript"><!-- $(document).ready(function(){ $('.btn').on('click', function(){ console.log('going to hide the target'); $('#body').animate({'scrollTop': $('.target2').offset().top}, 800); }); }); //--></script> <html>
1 個解決方案
解決方案1
0 已采納 2020-08-26 10:29:56
最后，我解決了這個問題。 jQuery.animate(...) 正在正確更改 scrollTop 值，但是“scroll-snap-type”和“scroll-snap-align”正在強制滾動對齊！！！！！
解決方案：
$(document).ready(function(){ $('.body') .find('img') .css('cursor', 'pointer') .on('click', function(){ var selector=$(this).attr('target'); $('.bodyPnl') /********** IMPORTANT **********/ .css('scroll-snap-type', 'none') /********** ********* **********/ .animate({ 'scrollTop': '+='+$(selector).position().top}, 800 /*Duration*/, function(){ /********** IMPORTANT **********/ $(this).css('scroll-snap-type', 'y mandatory'); /********** ********* **********/ } ) ; }); });
for循環中的jQuery.animate（）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.