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

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")吗？

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

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

您可以阅读.animate（）和.stop（）的jQuery文档。我还建议您阅读有关动画队列的内容，因为.stop()该原则适用于此。