我是靠谱客的博主 纯真鸡翅,这篇文章主要介绍JS总结笔记:鼠标滚动事件DOMMouseScroll和mousewheel鼠标滚动事件,现在分享给大家,希望可以做个参考。

鼠标滚动事件

鼠标滚动事件在不同的浏览器是有些区别的,五大浏览器(IE、Opera、 Safari、Firefox、Chrome)主要体现在Firefox与其他四个浏览器的区别

滚轮事件的区别

Firefox的滚轮事件使用 DOMMouseScroll
其他浏览器的滚轮事件使用 mousewheel

捕获滚轮信息的区别

滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta

绑定事件

Firefox可以使用addEventListener方法绑定DomMouseScroll事件

复制代码
1
2
elem.addEventListener(‘DOMMouseScroll’, func, false);

其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。

复制代码
1
2
3
window.onmousewheel=document.onmousewheel=func; //IE/Opera/Chrome

滚动值的区别

♥IE 鼠标滚轮向上滚动是120,向下滚动是-120

♥Opera 鼠标滚轮向上滚动是120,向下滚动是-120

♥Chrome 鼠标滚轮向上滚动是120,向下滚动是-120

♥Safari 鼠标滚轮向上滚动是360,向下滚动是-360

♥Firefox 鼠标滚轮向上滚动是-3,向下滚动是3

添加滚轮事件

①IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件:

复制代码
1
2
3
4
5
6
//IE注册事件 if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); //scrollFunc是监听到滚动事件后执行的方法 }

②Firefox使用addEventListener添加滚轮事件:

复制代码
1
2
3
4
5
6
7
//Firefox注册事件 if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); //flase指的是事件在冒泡阶段执行 }

③IE/Opera/Chrome可使用HTML DOM方式添加事件:

复制代码
1
2
window.onmousewheel=document.onmousewheel=scrollFunc; //IE/Opera/Chrome

综合添加滚轮事件

复制代码
1
2
3
4
5
if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); } window.onmousewheel=document.onmousewheel=scrollFunc; //IE/Opera/Chrome

滚轮信息

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下

JS写法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//兼容性写法,该函数也是网上别人写的 //判断鼠标滚轮滚动方向 if (window.addEventListener){//火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) {//获取事件对象中wheelDelta的值,这里表示向上滑动 //IE、chrome浏览器使用的是wheelDelta,并且值为“正负120” delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理 } else if (event.detail) {//获取事件对象中detail的值,这里表示向下滑动 //火狐浏览器使用的是detail,其值为“正负3” delta = -event.detail/3; } if (delta) handle(delta); } //上下滚动时的具体处理函数 function handle(delta) { if (delta <0){//向下滚动 }else{//向上滚动 } }

jQuery写法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e){ e.preventDefault(); var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail; var delta = Math.max(-1, Math.min(1, wheel) ); if(delta<0){//向下滚动 console.log('向下滚动'); }else{//向上滚动 console.log('向上滚动'); } }

注意:鼠标滚轮滚动一下产生数值是非常快的,所以为了更好的控制滚动事件。笔者建议添加防抖动或者防节流的js优化来更好的控制滚轮事件

参考文章
https://www.cnblogs.com/tanxiang6690/p/6904440.html
https://www.cnblogs.com/caoruiy/p/4694498.html

最后

以上就是纯真鸡翅最近收集整理的关于JS总结笔记:鼠标滚动事件DOMMouseScroll和mousewheel鼠标滚动事件的全部内容,更多相关JS总结笔记内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(66)

评论列表共有 0 条评论

立即
投稿
返回
顶部