区分鼠标滚轮滚动或滚动条滚动？答案

【问题标题】：Differentiate between mouse wheel scroll or scrollbar scroll?区分鼠标滚轮滚动或滚动条滚动？
【发布时间】：2014-12-16 19:43:47
【问题描述】：

我在 Stackoverflow 上进行了搜索，但似乎无法为这个问题找到满意的答案。基本上我想知道滚动是通过鼠标滚轮还是浏览器滚动条完成的。

【问题讨论】：

Detect whether scroll event was created by user 的可能重复项
@Joe，我认为这个副本不合适。提问者想要检测何时从浏览器的滚动条或鼠标滚轮开始滚动，而不是从用户操作或代码/浏览器行为。
scroll 是一个偶数，当带有overflow 的元素的滚动偏移量发生变化时触发。 wheel、mousewheel 和 DOMMouseScroll 与 overflow 的元素无关，但会告诉您是否使用了滚轮。
@JoeSwindell：我已经看过这个问题了。我不想检测它是否是用户。我只是想知道它是通过鼠标滚轮还是滚动条完成的。
可能与How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll? 重复，注意不要再使用.bind，而是.on

标签： javascript jquery

【解决方案1】：

这样的事情可能对你有用，但它不是最好的解决方案。

如果wheel 事件恰好在scroll 事件之前发生，则使用滚轮完成滚动，否则使用其他东西而不是滚轮来完成滚动。触发的两个事件之间存在细微的时间差异，这就是我使用阈值 currTime - lastWheelTime > 30 的原因。

$('.test').on('scroll wheel DOMMouseScroll mousewheel', function(e) {
    var lastWheelTime,
        currTime = (new Date()).getTime(); 

    if( e.type === 'scroll' ) {
        lastWheelTime = $(this).data().lastWheelTime || 0;

        if( currTime - lastWheelTime > 30 ) {
           $('.info').text('no wheel');
        } else {
           $('.info').text('with wheel');
        }

    } else {
        $(this).data().lastWheelTime = (new Date()).getTime(); 
    }
});

.test {
    width: 200px;
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
 
.inner {
    height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
    <div class="inner"></div>
</div>

【讨论】：

这绝对可行，但并不完美。让我们看看是否还有其他人有更优化的解决方案。
@rotaercz 我稍微更新了代码，以便不使用全局变量。是不是你不喜欢的currTime - lastWheelTime > 30？
它确实有效，但是是的，它依赖于事件的顺序和时间，所以它并不优雅。如果 javascript 事件触发得更快或事件顺序发生变化，它可能会在未来中断。
@rotaercz 我很确定wheel 事件总是会在scroll 之前发生。因为wheel 事件是低级设备事件，而scroll 是源自此wheel 事件的事件。
我同意你的看法。这不太可能，但我希望它尽可能干净。

【解决方案2】：

这是我检测是否通过滚轮滚动的技巧
（感谢@t.niese 的代码 sn-p，我为我的演示做了一些修改）

var withWheel = true;
$('.test').on('scroll', function() {
  $(".info").text("with wheel: " + withWheel);
})


$('.inner').on('mouseover', function() {
  withWheel = true;

}).on('mouseleave', function(e) {
  e.stopPropagation();
  withWheel = false;

});

.test {
  width: 200px;
  height: 300px;
  border: 1px solid red;
  overflow: auto;
}
.info {
  position: fixed;
}
.inner {
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info"></div>
<div class="test">
  <div class="inner"></div>
</div>

【讨论】：

【解决方案3】：

我会说滚轮滚动和滚动条滚动是相同的。请参阅 jquery 页面Here。

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects

读到这里，看起来同一个事件将被两者触发。

【讨论】：

我想知道它是通过鼠标滚轮还是滚动条完成的。滚动事件本身对我来说并不重要。
我是说看起来你做不到。
我很确定有办法区分它们。让我们看看其他人怎么说。
对于现代浏览器，wheel 和 scroll 监听器是可区分的，因为 wheel 返回一个 WheelEvent，scroll 只返回一个 Event。但是，如果您同时监听wheel 和scroll，则使用鼠标滚轮将触发两个监听器，而单独使用滚动条只会触发scroll 监听器。最好检查返回的事件实例以确定。

【解决方案4】：

另一种可能的方法（我还没有尝试过）是检查在滚动事件期间是否按下了鼠标按钮（必须单击滚动条，对吗？）。

【讨论】：