当用户手动滚动时，Jquery .animate() 停止滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18445590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .animate() stop scrolling when user scrolls manually?
提问by lisovaccaro
I have set up a snippet that scrolls a page section into view when it's clicked, the problem is that if the user wants to scroll in the middle of the animation the scroll kinda stutters.
我已经设置了一个片段，当它被点击时将页面部分滚动到视图中，问题是如果用户想要在动画中间滚动，滚动有点卡顿。
$( "section" ).click(function(e) {
$('html,body').animate({ scrollTop: $(this).position().top }, 'slow');
return false;
});
How can I stop the jquery animation if the user scrolls manually?
如果用户手动滚动，如何停止 jquery 动画？
回答by Praxis Ashelin
Change your function to this:
将您的功能更改为：
var page = $("html, body");
$( "section" ).click(function(e) {
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
page.stop();
});
page.animate({ scrollTop: $(this).position().top }, 'slow', function(){
page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
});
return false;
});
This will:
这会：
- Stop the animation if the user scrolls manually (only during the animation)
- Does not obstruct your normal jQuery animation, such some of the other answers would
- 如果用户手动滚动，则停止动画（仅在动画期间）
- 不会妨碍您正常的 jQuery 动画，例如其他一些答案会
Some extra information:
一些额外的信息：
Why are you binding to all of those events? "scroll mousewheel etc..."
你为什么要绑定所有这些事件？“滚动鼠标滚轮等......”
There are many different types of scroll events. You can scroll down using your mouse, keyboard, touchscreen, etc. With this we make sure to catch allof them.
有许多不同类型的滚动事件。您可以使用鼠标、键盘、触摸屏等向下滚动。这样我们就可以确保抓住所有这些。
What is the use of
var page = $("html, body");? Can't I just use$("html, body")everywhere?
有什么用
var page = $("html, body");？我不能$("html, body")到处使用吗？
If you use the same selector more than once, it's good practice to cache them in a variable. It will be easier to write/use, and has better performance than having the program re-calculate the selector every time.
如果您多次使用同一个选择器，最好将它们缓存在一个变量中。与让程序每次重新计算选择器相比，它更易于编写/使用，并且具有更好的性能。
Where can I find more info on
.animate()and.stop()?
我在哪里可以找到更多信息
.animate()和.stop()？
You can read the jQuery documentation for .animate()and .stop(). I also recommend reading about animation queue'ssince .stop()works on this principle.
您可以阅读.animate()和.stop()的 jQuery 文档。我还建议阅读关于动画队列的内容，因为.stop()它遵循了这个原则。
回答by Kevin Lynch
I would do it by detecting user events
我会通过检测用户事件来做到这一点
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) {
if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") {
$("html,body").stop();
}
});
Here is a good tutorial.
这是一个很好的教程。
回答by Rituraj ratan
回答by devnull69
Try this
尝试这个
$('html,body').scroll(function() {
$(this).stop(true, false);
});
It will also remove all other animations from the element's queue, but it won't "jump" to the end of the current scroll animation.
它还会从元素的队列中移除所有其他动画，但不会“跳转”到当前滚动动画的末尾。
