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

编程问答 2022-08-15

问题描述

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

<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="utf-8"/>

   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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>

我的问题是：

  1. 平滑滚动动画不起作用（即使我删除了所有不必要的代码）；
  2. 第二次单击无法滚动到第三页（我尝试了offset（）和position（），但都无法正常工作；

PS：我曾尝试使用jQuery.scrollTo（..），插件，但动画仍然无法正常工作。

下面的代码工作正常，但是我可以发现区别..... 

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

解决方法

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