首页 > 代码库 > mousewheel 与 DOMMouseScroll

mousewheel 与 DOMMouseScroll

FF使用DOMMouseScroll,其他浏览器都是用mousewheel

FF下有个特殊属性event.detail,表示滚动的值
event.detail
正数:向下滚动,负数:向上滚动
滚动一次值3,向上滚动一页值为-32768,向下滚动一页值为+32768,其他值代表滚动的行数, 方向代表了数值的正负号
受信任的事件是不会给detail赋值0

其他浏览器,通过event.wheelDelta获取滚动值
正数:向上滚动,负数:向下滚动
滚动一次值120

  1. //非FF
  2. //event.wheelDelta
  3. // 正数:向上滚动,负数:向下滚动
  4. // 滚动一次值120
  5. document.body.onmousewheel = function (event) {
  6. event = event || window.event;
  7. log(‘onmousewheel‘);
  8. log(event);
  9. log(‘event.detail=‘ + event.detail);//0
  10. log(‘event.wheelDelta=‘ + event.wheelDelta);
  11. };
  12. //FF
  13. // event.detail
  14. // 正数:向下滚动,负数:向上滚动
  15. // 向上滚动一页值为-32768,向下滚动一页值为+32768,其他值代表滚动的行数, 方向代表了数值的正负号
  16. // 受信任的事件是不会给detail赋值0
  17. document.body.addEventListener("DOMMouseScroll", function (event) {
  18. log(‘DOMMouseScroll‘);
  19. log(event);
  20. log(event.detail);
  21. });
  22. function log(arg) {
  23. window.console && window.console.log(arg);
  24. }

参考资料
https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel