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

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