jquery - 获取鼠标滚轮 JQuery 事件处理程序的方向

Question

我尝试使用元素的 mousewheel 事件上的绑定(bind)来确定用户“鼠标滚轮”的方向。

您可以在下面的代码片段中看到，当鼠标滚轮滑过灰色矩形时，会触发该事件。

JSFiddle

HTML

<div class="rect"></div>
<div>
    Mousewheel event state : 
    <label class="event-state-mousewheel">Triggered !</label>
</div>

CSS

.rect {
    width : 200px;
    height : 200px;
    background-color : lightgrey;
}

.event-state-mousewheel {
    color : red;
    display : none;
}

JavaScript

$(function() {
    $('.rect').on('mousewheel', function(event) {
        $(".event-state-mousewheel").stop(true, false).fadeIn(250).fadeOut(250);
    });
});

问题

我找不到找到方向的方法。我尝试调试事件触发时返回的对象，但它太大而无法调试，因为其中的元素数量巨大。

问题

是否有使用这些元素(来自返回的对象)来获取鼠标滚轮方向的公式？或者是否有类似 $("#element").on("mousewheeltop") 的事件？

注意

我希望尽可能不使用任何其他外部插件，只使用 JQuery。

Answer 1

属性wheelDelta和detail就是您所需要的，如下所示:

if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // Scroll up
}
else {
    // Scroll down
}

我已经更新了您的jsfiddle使用此代码。

另外，请注意鼠标滚轮事件是deprecated你应该使用轮子来代替。