如何检测用户何时在主动滚动

How do I detect when the user is actively scrolling?

本文关键字：何时 滚动 用户 何检测 检测      更新时间：2023-09-26

我的页面有一个可滚动区域，其中包含许多元素。当悬停在上面时，每个元素都会触发一个函数。

我的问题是，如果用户用鼠标滚轮向上或向下滚动，当区域在下面滚动时，该函数会触发光标经过的每个元素。

有没有一种方法可以让我只有在用户没有主动滚动的情况下才能在悬停时触发功能？

jQuery内置的.scroll()似乎不是我所需要的，因为只有当滚动开始时才会触发滚动事件。可以这么说，我需要知道卷轴是否"正在进行中"。

更新：这是我当前的代码：

$container.find('div.item').each(function(i, e){
     $(e).hover(
          function(){
               $(this).toggleClass('expanded');
               // other functions here
          },
          function(){
               $(this).toggleClass('expanded');
          }
     );
});

因此，如果用户当前正在滚动页面，我想禁用.hover()中的所有内容。

我会在mouseenter上使用具有公平时间的setTimeout，然后在mouseleave上使用clearTimeout，这会在悬停上产生小延迟，因此只有当用户将鼠标悬停在元素上达到设定的时间时才会触发悬停。

这将希望最大限度地减少滚动问题。也许有比这更好的解决方案，但这是我想到的第一件事。

编辑

写这个例子很快，应该很好：

$(function() {
    "use strict";
    var $container = $("#container"),
        timeout, self;
    $container.find("div").each(function() {
        $(this).hover(
            function() {
                self = this;
                timeout = setTimeout(function() {
                    $(self).css({
                        width : 500,
                        height: 500
                    });
                }, 500);
            },
            function() {
                clearTimeout(timeout);
                $(this).css({
                    width : 300,
                    height: 300
                });
            }
        );
    });
});

要获得演示，请访问此小提琴：http://jsfiddle.net/sQVe/tVRwm/1/

你想延迟多少取决于你，我用了500毫秒。

注意

不需要.each()，您可以立即调用div集合上的.hover()。我包含了.each()，因为我不知道您是否希望做的不仅仅是绑定悬停事件。

相关文章：