JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

148 阅读 0 评论 98 点赞

我是靠谱客的博主单纯背包，最近开发中收集的这篇文章主要介绍JS 鼠标滚轮事件（mousewheel/DOMMouseScroll），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

onmousewheel （FireFox不支持此事件）

1 // IE/Opera/Chrome/Safari
2 document.body.onmousewheel = function(event) {
3     event = event || window.event;
4     console.dir(event);    
5 };

DOMMouseScroll（FireFox独有事件）

1 // Firefox
2 document.body.addEventListener("DOMMouseScroll", function(event) {
3     console.dir(event);    
4 });

js返回数值判断滚轮上下

Firefox 使用detail，只取 ±3．
五大浏览器（IE、Opera、Safari、Firefox、Chrome）使用wheelDelta，只取 ±120．
其中正数表示为向上，负数表示向下．

Example

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Test wheel event</title>
 6     </head>
 7     <body style="height:2000px;">
 8         <script type="text/javascript">
 9             var scrollFunc = function(event){
10                 event = event || window.event;
11                 if(event.wheelDelta){ // IE/Opera/Chrome/Safari
12                     t1 = event.wheelDelta;
13                     console.log(t1);
14                 }else if(event.detail){ // Firefox
15                     t2 = event.detail;
16                     console.log(t2);
17                 }
18             }
19             /*注册事件*/
20             if(document.addEventListener){
21                 // firefox
22                 document.body.addEventListener("DOMMouseScroll",scrollFunc,false);
23             }
24             document.body.onmousewheel = scrollFunc; // IE/Opera/Chrome/Safari  
25         </script>
26     </body>
27 </html>