日星网 windows 中文论坛

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 30|回复: 0

JS滚轮事件(mousewheel/DOMMouseScroll)

[复制链接]
发表于 2020-9-10 08:40:37 | 显示全部楼层 |阅读模式
兼容滚轮事件的方法
兼容 safari,chrome和firefox的函数
  1. var addEvent = (function(window, undefined) {
  2.   var _event = function(event) {
  3.     var type = event.type;
  4.     if (type === 'DOMMouseScroll' || type === 'mousewheel') {
  5.       console.log(event)
  6.       event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0);
  7.     }
  8.     if (event.srcElement && !event.target) {
  9.       event.target = event.srcElement;
  10.     }
  11.     if (!event.preventDefault && event.returnValue !== undefined) {
  12.       event.preventDefault = function() {
  13.         event.returnValue = false;
  14.       }
  15.     }
  16.     return event;
  17.   };
  18.   if (window.addEventListener) {
  19.     return function(el, type, fn, capture) {
  20.       if (type === 'mousewheel' && document.mozFullScreen !== undefined) {
  21.         type = "DOMMouseScroll";
  22.       }
  23.       el.addEventListener(type, function(event) {
  24.         fn.call(this, _event(event));
  25.       }, capture || false);
  26.     }
  27.   } else if (window.attachEvent) {
  28.     return function(el, type, fn, capture) {
  29.       el.attachEvent("on" + type, function(event) {
  30.         event = event || window.event;
  31.         fn.call(el, _event(event));
  32.       });
  33.     }
  34.   }
  35. })(window);
复制代码


测试使用方法如下:
  1. addEvent(window, "mousewheel", function(event) {
  2.   console.log(event.delta);
  3.   if(event.delta < 0) {
  4.     console.log('鼠标向下滚动了');
  5.   }
  6. });
复制代码
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

手机版|小黑屋|日星网

GMT, 2020-9-26 05:53 AM , Processed in 0.015735 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表