Question

如何在不滚动页面的情况下检测滚动方向（鼠标滚轮向上/向下）？我的页面包装器的高度为100％，因此没有可滚动的内容，但我需要鼠标滚轮的滚动方向。

由于谷歌地图也是如此（使用鼠标缩放而不“滚动”页面），我想知道如何实现这一目标。

Answer 1

如果您在谈论鼠标滚轮，可以在窗口上使用addEventListener。 event.wheelDelta的增量为-120或120，分别向上和向下滚动。：

window.addEventListener('mousewheel', function(e){
    wDelta = e.wheelDelta < 0 ? 'down' : 'up';
    console.log(wDelta);
});

JSFiddle

当然，您需要迎合不同的浏览器。但我会把它留给你。见here

Answer 2

您可以为mousewheel事件添加处理程序，不仅可以获取event对象，还可以获得轮子增量。

// Using jQuery library
$(function() {
    $('body').bind('mousewheel', function(event, delta) {
       // delta > 0 scroll up 
       // delta < 0 scroll down
    });
});

纯javascript：

document.onmousewheel = function(evt){
    console.log(evt) // take a look in your console at evt.wheelDeltaX, evt.wheelDeltaY
     //evt.wheelDeltaX is horizont scroll
     //evt.wheelDeltaY is vertical scroll
     //evt.wheelDelta is deltas x+y 

     // if evt.wheelDeltaY < 0 then scroll down, if >0 then scroll up
     // if evt.wheelDeltaX < 0 then scroll left, if >0 then scroll right
}

Answer 3

查看jQuery MouseMove http://api.jquery.com/mousemove/ 将前一个x y存储到变量中，并将其与当前的once进行比较，以确定鼠标指针的方向

Answer 4

我修改了Georges答案，以便与现代浏览器一起使用。鼠标滚轮事件已过时，因此不再起作用。

以下代码段应在所有现代浏览器中均适用：

window.addEventListener('wheel', function(e){
    let wDelta = e.deltaY > 0 ? 'down' : 'up';
    console.log(wDelta);
});

无需滚动即可获得滚动方向

4 个答案: