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：