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: