Question

我试图找出用户的方向＆＃34; mousewheeled＆＃34;对我的元素使用mousewheel事件的绑定。

您可以在以下代码段中看到，当鼠标移动到灰色矩形上时，会触发事件。

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，您应该使用 wheel 。

Answer 2

$(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});

请注意：Get mouse wheel events in jQuery?

获取mousewheel JQuery事件处理程序的方向

2 个答案: