5

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

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

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

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

我也尝试过 key-down 作为一个选项，但鼠标滚动没有注册为一个键。

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

4

3 回答 3

5

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

例如：（未测试）

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事件在 line 内触发E.elem.scrollTop = E.now。如果它不是可重入的（可能仅在某些浏览器中），则该事件将在scrollAnimating设置回false. 要解决这个问题，您可以在事件scrollAnimating内部重置。scroll

于 2009-11-02T02:51:52.783 回答
1

我遇到了同样的问题，但我在 jQuery 文档上找到了解决方案。animate 方法中有一个属性，可让您在动画完成时设置回调函数。

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

这是代码：

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})
于 2018-01-13T00:04:58.850 回答
-2

弄清楚了！在互联网上环顾四周后，我发现了一些名为Document.addEventListenerMozilla 和document.onmousewheelIE 和 Opera 的东西，它们可以捕捉滚动事件。

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})
于 2009-11-02T03:04:24.863 回答