jquery - 仅在用户滚动时调用 Scroll，而不是在 animate() 时调用

Question

我在页面上有一些链接，其目的是“转到顶部”，通过使用漂亮的动画将页面滚动到顶部来完成。我注意到，有时当页面滚动时，用户会想要向下滚动，但这是不可能的。屏幕只会卡顿，但会继续动画，直到到达顶部。

如果用户尝试滚动，我想停止动画，因此我编写了以下代码:

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

这段代码是有问题的，因为 animate() 算作滚动，因此它在停止之前只移动了一点点。

我也尝试过按下按键作为选项，但鼠标滚动未注册为按键。

当用户滚动时，有什么方法可以调用我的滚动函数，而不是animate()吗？

Answer 1

您可以编写自己的代码来设置动画值，并设置一个标志来指示更改来自动画。

例如:(未经测试)

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

您可以对 scrollLeft 执行相同的操作。

请注意，我假设设置 scrollTop 是可重入调用，因此 scroll 事件在行 E.elem.scrollTop = 内触发E.now。如果它不可重入(可能仅在某些浏览器中)，则在将 scrollAnimating 设置回 false 后将触发该事件。要解决此问题，您可以在 scroll 事件中重置 scrollAnimating。