javascript - 如何检测用户何时主动滚动？

Question

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

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

有没有一种方法可以让函数只有在用户没有主动滚动时才在悬停时触发？

jQuery 的内置 .scroll() 似乎不是我需要的，因为滚动事件仅在滚动开始时触发。可以这么说，我需要知道卷轴是否在“进行中”。

---

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

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

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

Answer 1

我会在 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
                });
            }
        );
    });
});

如需演示，请访问此 fiddle :http://jsfiddle.net/sQVe/tVRwm/1/

你要多少延迟就看你自己了，我用的是500ms。

注意

不需要.each()，您可以立即在div 集合上调用.hover()。我包含了 .each() 因为我不知道除了绑定(bind)悬停事件你还想做更多的事情。