jQuery 动画完成函数

Question

我正在尝试制作一个全屏部分滚动页面。我已经能够阻止默认用户滚动。现在，要替换它，我使用以下代码：

var isAutoScrolling = false;
$(window).off('scroll.fullscreen');
$(window).on('scroll.fullscreen', function () {
    if (isAutoScrolling === false) {
        isAutoScrolling = true;
        $('html, body').animate({
            scrollTop: $(nextDiv).offset().top
        }, '400', 'linear', function () {
            console.log('animated');
            isAutoScrolling = false;
        });
    }
});

不幸的是 console.log 每个卷轴写 'animated' 2 次。这怎么可能？上面的代码至少应该在 2 console.log 秒之间中断 400 毫秒，对吗？任何人发现其中的错误？

Answer 1

Issue comes from you are binding event on two elements html, body. Some browser would then fire it twice (some others have ony one of these elements scrollable, so fire it only once).

您可以使用promise接口和相关方法跨浏览器规范化。

$(window).on('scroll.fullscreen', function () {
    if (isAutoScrolling === false) {
        isAutoScrolling = true;
        $('html, body').animate({
            scrollTop: $(nextDiv).offset().top
        }, '400', 'linear').promise().done(function () {
            console.log('animated');
            isAutoScrolling = false;
        });
    }
});

~~就是说，我猜你可以使用 :animated 伪选择器而不是使用标志：~~

$(window).on('scroll.fullscreen', function () { $('html, body').filter(':not(:animated)').animate({ scrollTop: $(nextDiv).offset().top }, '400', 'linear').promise().done(function () { console.log('animated'); }); });

（请参阅下面@Ionică Bizău 的评论）

jQuery 动画完成函数

jQuery animate finished function

jquery

scroll

jquery-animate