一、兼容性考量
1、IE6、IE7、IE8
注册事件使用:onmousewheel,使用attachEvent监听事件onmousewheel。
滚动步长120,向下是负值,向上是正值(正负120)。
取得滚动的值:event.wheelDelta
if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); }
2、Firefox
注册事件使用:MozMousePixelScroll或者DOMMouseScroll,不能使用on来进行注册,需要用addEventListener来监听事件。
滚动步长3,向下是正值,向上是负值(正负3)。
取得滚动的值:event.detail。
一般不使用MozMousePixelScroll。
if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }
3、chrome
注册事件使用:onmousewheel。
滚动步长120,向下是负值,向上是正值(正负120)。
取得滚动的值:event.wheelDelta、event.wheelDeltaX、event.wheelDeltaY
window.onmousewheel=document.onmousewheel=scrollFunc;
4、opera
IE和Firefox的集大成者。
注册事件使用:onmousewheel。
滚动步长120,向下是负值,向上是正值(正负120)。
取得滚动的值:event.wheelDelta或者event.detail。
window.onmousewheel=document.onmousewheel=scrollFunc;
5、Safari
同chrome。
注册事件使用:onmousewheel。
滚动步长120,向下是负值,向上是正值(正负120)。
取得滚动的值:event.wheelDelta
window.onmousewheel=document.onmousewheel=scrollFunc;
二、总结
依据以上,兼容性的鼠标滚动事件的添加:
if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//Firefox window.onmousewheel=document.onmousewheel=scrollFunc;//ie、chrome、opera
滚动值的取得:
if (event.wheelDelta) { delta = event.wheelDelta / 120; //chrome、ie、opera、Safari } else if (event.detail) { delta = -event.detail / 3; //Firefox的滚动值的正负正好与其他浏览器相反 }
参考文章:js中鼠标滚轮事件详解