当用户手动滚动时，Jquery .animate（）停止滚动？ [英] Jquery .animate() stop scrolling when user scrolls manually?

问题描述

我已经设置了一个片段，当页面部分被点击时，它滚动到视图，问题是，如果用户想滚动动画的中间，滚动种类。

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

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

How can I stop the jquery animation if the user scrolls manually?

推荐答案

将您的函数更改为：

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动画，例如其他一些答案

一些额外的信息：

你为什么要约束所有这些事件？ scroll mousewheel etc ...

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 all of them.

var page = $（html，body）; 的用法是什么？我不能只使用 $（html，body）无处不在？

What is the use of var page = $("html, body");? Can't I just use $("html, body") everywhere?

如果您多次使用相同的选择器，建议您将它们缓存在变量。

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.

我在哪里可以使用找到更多信息 .animate（）和 .stop（）？

您可以阅读 .animate（）和 .stop（）。我还建议您阅读动画队列，因为 .stop（）工作原理。

You can read the jQuery documentation for .animate() and .stop(). I also recommend reading about animation queue's since .stop() works on this principle.

这篇关于当用户手动滚动时，Jquery .animate（）停止滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！