鼠标滚动事件

一、兼容性考量
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中鼠标滚轮事件详解

此条目发表在规范分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注