11

如何在没有滚动条的情况下检查鼠标滚轮的移动?

$(document).mousewheel(function() {
     clicker.html("a7a");
});
4

4 回答 4

32

我强烈推荐你使用这个 jQuery 插件:PLUGIN

没有插件,试试这个例子:EXAMPLE

HTML:

<div id='foo' style='height:300px; width:300px; background-color:red'></div>

Javascript:

$('#foo').bind('mousewheel', function(e) {
    if(e.originalEvent.wheelDelta / 120 > 0) {
        alert('up');
    } else {
        alert('down');
    }
});

div 上没有滚动条,但检测到了滚轮事件。

于 2013-09-18T19:03:29.647 回答
9

使用此代码

$('#foo').bind('mousewheel DOMMouseScroll', function (event) {           
     if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          //up
     }
     else {
          //down
     }
});
于 2015-02-28T08:57:11.883 回答
7

而且,如果您根本不想使用任何插件(IE8、Chrome、Firefox、Safari、Opera...),只需执行以下操作:

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) {
            alert("Down");
        }

        //scrolling up?
        else {
             alert("Up");
        }
        return false;
    }
}

活生生的例子:http: //jsfiddle.net/CvCc6/1/

于 2013-09-25T16:34:12.933 回答
2

这只是对@Aaron 答案的更新,使用了新的“wheel”事件,如下所述:https ://developer.mozilla.org/en-US/docs/Web/Events/wheel

$('#foo').on('wheel', function(e){
    if(e.originalEvent.deltaY < 0) {
        console.log('scrolling up !');
    } else{
        console.log('scrolling down !');
    }
});

你也可以用它deltaX来查看水平滚动,或者deltaZ如果你有一些疯狂的 3D 事情正在发生。

于 2017-06-16T18:38:46.243 回答