.onmousewheel / .wheelDelta / .DOMMouseScroll / .detail ——鼠标滚轮事件

浏览器兼容性

1、谷歌、IE : onmousewheel

写法：元素.onmousewheel = 函数名;

oDiv.onmousewheel = fn;

（1）wheelDelta方法——判断滚轮方向

写法：事件.wheelDelta

alert( ev.wheelDelta );

描述：火狐没有这个属性，值为undefined

数值：

鼠标滚轮向上滚动：120

鼠标滚轮向下滚动：-120

 

2、火狐: DOMMouseScroll ，且必须用addEventListener方法来实现

写法：元素.addEventListener('DOMMouseScroll', 函数名, 是否捕获);

描述：因为IE没有addEventListener方法会报错，所以兼容性写法如下

oDiv.onmousewheel = fn; //非火狐
if (oDiv.addEventListener) {  //火狐
    oDiv.addEventListener('DOMMouseScroll', fn, false);
}

（1）detail方法——判断滚轮方向

写法：事件.detail

alert(ev.detail)

描述：其他浏览器上下数值都是0，IE678数值为undefined

数值：

鼠标滚轮向上滚动：-3

鼠标滚轮向下滚动：3

 

3、解决兼容性的写法

描述：向上值为true向下值为false

if (ev.wheelDelta) {  //IE/谷歌
    b = ev.wheelDelta > 0 ? true: false;
} else {  //火狐
    b = ev.detail < 0 ? true: false;
}