$（'body，html'）。is（'：animated'））似乎不起作用

Question

我有4個div，其高度設置為窗口高度。 我想在每次向下滾動時滾動到下一個滾動，但是在第一次向下滾動后，它一直滾動，似乎忽略了is:animated

<style>

    .div {
        width: 100%;
    }

    .red {
        background: red;
    }

    .yellow {
        background: yellow;
    }

    .green {
        background: green;
    }

    .blue {
        background: blue;
    }

</style>

<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>



function setHeights() {
        $('.nbhd').css('height', window.innerHeight);
    }

    function scrollSections() {

        if ($('body, html').is(':animated')) {
            return;
        }

        var currentSectionId = $('.nbhd.scrolledto').data('id');

        currentSectionId++;

        $('.scrolledto').removeClass('scrolledto');

        var section = $('#id'+currentSectionId);

        section.addClass('scrolledto');

        var pos = section.offset().top;

        $('body, html').animate({scrollTop: pos}, 1000, function() {
            console.log('animated');
        });

    }

    setHeights();



    $( window ).on( "scroll", function() {
        scrollSections();
    });

小提琴： https : //jsfiddle.net/2d47k6af/

由於某些原因，我還記錄了6次animated記錄，我期望3。

Answer 1

我想這就是你要去的地方： https : //jsfiddle.net/2d47k6af/5/

問題在於您無法區分JavaScript和用戶自身觸發的滾動事件 。 因此，當您運行動畫時，它會觸發許多$(window).on("scroll", ...); 由於$('body, html').is(':animated')工作正常，因此忽略了這些事件。

但是，最后一個滾動事件可能發生在動畫結束之后，因此又一次調用了函數scrollSections() ，觸發了另一個動畫，依此類推。 我的解決方案是在動畫結束之后和准備好讓另一個用戶觸發滾動之前添加短暫的超時：

$('body, html').animate({scrollTop: pos}, 1000, function() {
  console.log('animated');
  ignoreScrollEvents = true;

  setTimeout(function() {
    ignoreScrollEvents = false;
  }, 100);

});

Answer 2

您可以使用變量來實現您想要的：

 function setHeights() { $('.nbhd').css('height', window.innerHeight); } var isAnimated = false; // Initialize variable function scrollSections() { if (isAnimated) return; // Previous animation still in action isAnimated = true; // lock it var currentSectionId = $('.nbhd.scrolledto').data('id'); currentSectionId++; var section = $('#id'+currentSectionId); if (!section.length) { currentSectionId = 0; section = $('#id0'); } $('.scrolledto').removeClass('scrolledto'); section.addClass('scrolledto'); var pos = section.offset().top; $('body').animate({scrollTop: pos}, 1000, function() { setTimeout(function(){ isAnimated = false; // unlock it on next eventloop tick }) }); } setHeights(); $( window ).on( "scroll", function() { scrollSections(); }); 

 .div {width: 100%;} .red {background: red;} .yellow {background: yellow;} .green {background: green;} .blue {background: blue;} 

 <div id="id0" data-id="0" class="nbhd red scrolledto"></div> <div id="id1" data-id="1" class="nbhd yellow"></div> <div id="id2" data-id="2" class="nbhd green"></div> <div id="id3" data-id="3" class="nbhd blue"></div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>