如何检测用户正在主动滚动？

Question

如何检测用户正在主动滚动？

javascriptjqueryscrolljquery-events

6

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

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

是否有办法只有在用户不主动滚动时才悬停触发函数?

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

更新：以下是我的当前代码：

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

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

- daGUY

我们能在触摸板滚动上做到这一点吗？ - kapil

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sQVe · Accepted Answer

我会在mouseenter时使用setTimeout设置合理的时间，然后在mouseleave时清除setTimeout。这将在悬停时创建一个短暂的延迟，因此仅当用户将鼠标悬停在元素上达到设定时间时才会触发悬停事件。

这样做有望减少滚动问题。可能存在比这更好的解决方案，但这是我想到的第一件事情。编辑快速编写了此示例，应该可以正常工作：

$(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/

你可以自己决定延迟多久，这里我用了500毫秒。

注意：

.each()方法不是必需的，你可以直接在

元素集合上调用.hover()方法。但我包含了.each()方法，因为我不知道你是否还想进行更多操作绑定事件之外的事情。