03onmousewheel

兼容问题

火狐

  1. 兼容火狐注册方式DOMMouseScroll,使用addEventListener
  2. 其他使用onmousewheel即可

判断滚动方向。

  1. 火狐使用detail,值是正负3
  2. 其他使用wheeldelta,值是正负120
  3. 向下滚动为负值

项目中使用

  1. deltaYwheeldelta正负相反
  2. MDN 中event.detail已经标记为红色、
  3. 事件中有
  • 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 的正负,进行放大缩小的操作
03onmousewheel_第1张图片
getBoundingClientRect.png

你可能感兴趣的:(03onmousewheel)