javascript - $ ('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();
    });

fiddle :https://jsfiddle.net/2d47k6af/

出于某种原因，我还记录了 6 次动画，我预计是 3 次。

Answer 1

我想这就是你想要的:https://jsfiddle.net/2d47k6af/5/

问题是你不能 distinguish scroll events triggered by JavaScript and by user themself 。因此，当您运行动画时，它会触发许多 $(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);

});