jQuery.animate(...) 无法正常工作

Question

我想创建一个简单的页面，其中包含如下的对齐（到元素）滚动页面：

<!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;">&nbsp;</div>
<button type="button" class="btn">Action</button>

<div style="height:1000px;">&nbsp;</div>

<div class="target2" style="width:500px; height:500px; background-color:blue; opacity:1;">&nbsp;</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>

Answer 1

最后，我解决了这个问题。 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'); 
              /********** ********* **********/
            }
          )
        ;
    });
 });

jQuery.animate(...) 无法正常工作

jQuery.animate(...) is not working properly

html

javascript

jquery

animation

jquery-animate