js_事件——鼠标滚轮事件

1.mousewheel事件

  当鼠标滚轮滚动时在页面上触发mousewheel事件,该事件会一直冒泡到window对象上。当鼠标向前滚动时,event.wheelDelta的值为正数,向后滚动时为负数。(谷歌是正负150,Edge、opera是正负120)

2.DOMMouseScroll事件

  这是firefox独有的事件,当鼠标向前滚动时,event.detail的值为-3的倍数,否则为3的倍数。

  DOMMouseScroll事件只能通过事件监听——addeventListener来进行绑定。

一般通过检测正负号来检测鼠标滚轮向前还是向后。

Warining:chrome、Edge、Opera浏览器的mousewheel事件的event.wheelDelta值是滚轮向前滚为正数,向后滚为负数。FireFox则不然,向前为负,向后为正。

代码:

var oContent=document.getElementById("content");
        oContent.addEventListener("mousewheel",(event)=>{
            alert(event.wheelDelta);
        },false);
        oContent.addEventListener("DOMMouseScroll",(event)=>{
            alert(event.detail);
        },false);

chrome:

EDGE:

Opera:

 FireFox:

原文地址:https://www.cnblogs.com/Syinho/p/12272242.html