Блог

Главная - Вопросы по программированию - jQuery.animate (…) не работает должным образом

jQuery.animate (…) не работает должным образом

#javascript #html #jquery #animation #jquery-animate

#javascript #HTML #jquery #Анимация #jquery-animate

Вопрос:

Я хотел бы создать простую страницу с привязкой (к элементу) страницы прокрутки ниже:

 <!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=compressamp;cs=tinysrgbamp;dpr=1amp;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:ANd9GcQbYQSFdhlvD9_Inot8wimKt2hdMVXe1KLgogamp;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/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;">amp;nbsp;</div>
<button type="button" class="btn">Action</button>

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

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

Ответ №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'); 
              /********** ********* **********/
            }
          )
        ;
    });
 });