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

Question

我尝试通过mousewheel对元素的事件进行绑定来确定用户向哪个方向“移动” 。

您可以在以下代码段中看到，将鼠标悬停在灰色矩形上时，将触发事件。

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。

另外，请注意，不推荐使用mousewheel事件，而应使用wheel。