兼容问题
火狐
- 兼容火狐注册方式
DOMMouseScroll
,使用addEventListener
- 其他使用
onmousewheel
即可
判断滚动方向。
- 火狐使用
detail
,值是正负3 - 其他使用
wheeldelta
,值是正负120 - 向下滚动为负值
项目中使用
-
deltaY
和wheeldelta
正负相反 - MDN 中
event.detail
已经标记为红色、 - 事件中有
- deltaX
- deltaY
- deltaZ
- wheeldelta,和wheeldetalY 相同
- wheeldeltaX
- wheeldeltaY
function onwheel(event) {
var deltaY = 0;
if (event.deltaY) { // IE 9+, Chrome 3.1+ ,FireFox 17+
deltaY = event.deltaY
}else {
deltaY = -event.wheeldelta // 注意两者相反
}
}
// 之后通过判断 deltaY 的正负,进行放大缩小的操作