仅在用户滚动时调用Scroll,而不是在animate()时调用Scroll

Question

我在页面上有一些链接,目的是"走到顶端",通过将页面滚动到顶部并获得一个漂亮的动画来完成.我注意到,有时在页面滚动时,用户会想要向下滚动,例如,但这是不可能的.屏幕只会断断续续,但会继续制作动画,直到它到达顶部.

我想在用户尝试滚动时停止动画,因此我编写了这段代码:

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

这段代码存在问题,因为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.要解决此问题,您可以scrollAnimating在scroll事件内重置.