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.logs 之间中断 400 毫秒，对吧？有人发现这个错误吗？

Answer 1

问题来自 you are 两个元素 html、body 上的绑定事件。一些 然后浏览器会触发它两次（其他一些只有其中之一 元素可滚动，所以只触发一次）。

您可以使用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 的评论）