mousewheel 与 DOMMouseScroll

FF使用DOMMouseScroll，其他浏览器使用mousewheel

FF在一个特殊的属性event.detail。表示滚动的值

event.detail

正数：向下滚动，负数：向上滚动

滚动一次值3，向上滚动一页值为-32768，向下滚动一页值为+32768。其它值代表滚动的行数, 方向代表了数值的正负号

受信任的事件是不会给detail赋值0

其它浏览器，通过event.wheelDelta获取滚动值

正数：向上滚动。负数：向下滚动

滚动一次值120

  //非FF
  //event.wheelDelta
  // 正数:向上滚动。负数：向下滚动
  // 滚动一次值120
  document.body.onmousewheel = function (event) {
    event = event || window.event;
    log(‘onmousewheel‘);
    log(event);
    log(‘event.detail=‘ + event.detail);//0
    log(‘event.wheelDelta=‘ + event.wheelDelta);
  };

  //FF
  //  event.detail
  //  正数：向下滚动。负数：向上滚动
  //  向上滚动一页值为-32768，向下滚动一页值为+32768，其它值代表滚动的行数, 方向代表了数值的正负号
  //  受信任的事件是不会给detail赋值0
  document.body.addEventListener("DOMMouseScroll", function (event) {
    log(‘DOMMouseScroll‘);
    log(event);
    log(event.detail);
  });

  function log(arg) {
    window.console && window.console.log(arg);
  }

參考资料

https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll

https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

版权声明：本文博客原创文章，博客，未经同意，不得转载。