Question

我已经设置了一个片段，在点击时将页面部分滚动到视图中，问题是如果用户想要在动画中间滚动滚动有点断断续续。

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

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

Answer 1

将您的功能更改为：

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

这将：

如果用户手动滚动（仅在动画期间）
不妨碍你的普通jQuery动画，其他一些答案会

一些额外信息：

为什么你绑定所有这些事件？ “滚动鼠标滚轮......”

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

var page = $("html, body");有什么用？我不能在任何地方使用$("html, body")吗？

如果您多次使用同一个选择器，最好将它们缓存在variable中。写入/使用会更容易，并且比每次程序重新计算选择器具有更好的性能。

我在哪里可以找到有关.animate()和.stop()的更多信息？

您可以阅读.animate()和.stop()的jQuery文档。我还建议您阅读animation queue's，因为.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();
  }
});

这是a good tutorial。

Answer 3

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

参考 stop

Answer 4

试试这个

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

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

当用户手动滚动时，Jquery .animate（）会停止滚动吗？

4 个答案: