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

Posted 2023-05-08

【中文标题】仅在用户滚动时调用 Scroll，而不是在 animate()

【英文标题】：Call Scroll only when user scrolls, not when animate()

【发布时间】：2010-12-12 03:59:08

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

我确信它看起来不错，我对解决这个问题很感兴趣，但出于个人喜好，我不喜欢动画滚动

@Michael Haren：明白，但有时客户喜欢动画：D

【参考方案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。

【讨论】：

这应该会在动画收到不是来自动画的scroll 事件时立即停止。 （通过检查scrollAnimating）

@SLacks：您的代码确实有效。很抱歉，我的头脑如此之大。

我不知道；尝试在 Firebug 中调试它。

【参考方案2】：

我遇到了同样的问题，但我在 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;
)

【讨论】：

欢迎来到 SO。感谢您发布答案。请完成游览并享受 SO ;-)

【参考方案3】：

想通了！在互联网上环顾四周后，我发现 Mozilla 的 Document.addEventListener 和 IE 和 Opera 的 document.onmousewheel 可以捕获滚动事件。

$('#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;
)

【讨论】：

滚动方式有多种（拖动选择、拖动滚动条、方向键、自动滚动）； AFAIK，这只会抓住鼠标滚轮。

@SLacks: true，但大多数用户只会使用滚轮。许多网站都实现了动画滚动，他们很少想到想要中途滚动的用户：这是可用性和臃肿之间的折衷。

@SLacks：别管我之前说的，你的解决方案效果很好。我为傲慢而不测试你的例子而道歉。我还有很多东西要学。

@Brandon#1：这实际上不是真的。我认识很多人总是使用传统的滚动条，还有几个人总是使用箭头键。此外，仅仅因为许多网站做得不对并不意味着您不应该这样做；从人群中脱颖而出总是很好。