jquery .animate（）停止滚动手动滚动用户？

我已经设置了一个片段，当它被点击时将页面部分滚动到视图中，问题是如果用户想要在animation的中间滚动，那么滚动有点口吃。

$( "section" ).click(function(e) { $('html,body').animate({ scrollTop: $(this).position().top }, 'slow'); return false; }); 

如果用户手动滚动，如何停止jQueryanimation？

Answer 1

改变你的function：

 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; }); 

这会：

• 如果用户手动滚动，则停止animation（仅在animation期间）
• 不妨碍你正常的jQueryanimation，这样的一些其他的答案会

---

一些额外的信息：

你为什么要约束所有这些事件？ “滚动鼠标滚轮等…”

有许多不同types的滚动事件。 您可以使用鼠标，键盘，触摸屏等向下滚动。有了这个，我们一定要抓住所有这些。

什么是var page = $("html, body"); ？ 我不能只使用$("html, body")到处？

如果多次使用相同的select器，最好将它们caching在一个variables中 。 编写/使用会更容易，并且比程序每次重新计算select器的性能更好。

我在哪里可以find.animate()和.stop()更多信息？

您可以阅读.animate（）和.stop（）的jQuery文档。 我也推荐阅读animation队列，因为.stop()是基于这个原理的。

Answer 2

我会通过检测用户事件来做到这一点

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

这是一个很好的教程 。

Answer 3

 $("your selector").scroll(function(){ $('html,body').stop(); }); 

参考站

Answer 4

尝试这个

 $('html,body').scroll(function() { $(this).stop(true, false); }); 

它也会从元素队列中删除所有其他animation，但不会“跳转”到当前滚动animation的结尾。