javascript - 区分鼠标滚轮滚动还是滚动条滚动？

Question

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

Answer 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>