概述
1.Jquery-MouseWheel
jquery默认是不支持支持鼠标滚轮事件(mousewheel)
jquery MouseWheel下载：https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js
然后就可以使用mousewheel和unmousewheel事件函数了
1 $('div.mousewheel_example').mousewheel(fn); 2 $('div.mousewheel_example').bind('mousewheel', fn);
Jquery MouseWheel兼容性
- FireFox浏览器使用DOMMouseScroll事件,其他（包括IE6）都是使用onmousewheel事件；
- FireFox：detail（属性）判断方向，返回值是3的整数倍(3/-3), 为负数表示向上滚动，正数向下滚动
- 其他浏览器wheelDelta判断滚动方向，其值为120/-120，为负数的时候表示向下滚动，正数的时候向上滚动
- opera:同时拥有wheelDelta和detail,其中“detail”属性返回值和FF中的wheelDelta相同
- google、IE11：同时拥有wheelDelta和detail，但 detail值无论上滚还是下滚都为0，wheelDelta上滚为120，下滚为-120
使用实例
1 // jquery 兼容的滚轮事件
2 $(document).on("mousewheel DOMMouseScroll", function (e) {
3
4 var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
5 (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
6
7
8 if (delta > 0) {
9 // 向上滚
10 console.log("wheelup");
11 } else if (delta < 0) {
12 // 向下滚
13 console.log("wheeldown");
14 } 15 });
2.使用js原生实现滚轮事件
但是考虑到兼容性
IE下通过attachEvent实现事件监听
Chrome和FF通过addEventListener来实现事件监听
但是FF滚轮事件是：DOMAMouseSrcoll
其他浏览器：onmousewheel
| 事件监听 | 滚轮事件 | |
| Chrome | addEventListener | onmousewheel |
| IE | attachEvent | onmousewheel |
| FF | addEventListener | DOMAMouseSrcoll |
所以我自己封装了一个兼容各浏览器的方法
1 addEvent: function(obj, xEvent, fn) { 2 if (obj.attachEvent) { 3 obj.attachEvent('on' + xEvent, fn); 4 } else { 5 obj.addEventListener(xEvent, fn, false); 6 } 7 },
调用：
1 this.addEvent($(document),"mousewheel",callback); //其他 2 this.addEvent($(document),"DOMMouseScroll",callback); //FF
最后
以上就是现代香菇为你收集整理的鼠标滚轮事件 mousewheel/DOMMouseScroll的全部内容，希望文章能够帮你解决鼠标滚轮事件 mousewheel/DOMMouseScroll所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复