滚轮事件（原生js） 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>滚轮事件</title>
 6         <style type="text/css">
 7             #box {
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: #FF0000;
11             }
12         </style>
13         <script>
14             window.onload = function() {
15                 var box = document.getElementById("box");
16                 /**
17                  * onmousewheel 该方法火狐不兼容
18                  *     需要使用DOMMouseScroll绑定滚动事件,并且通过addEventListener()函数绑定
19                  */
20                 box.onmousewheel = function(event) {
21                     event = event || window.event;
22                     /**
23                      * wheelDelta火狐不支持
24                      */
25                     if (event.detail < 0 || event.wheelDelta > 0) {
26                         box.style.height = box.clientHeight - 10 + "px";
27                     } else {
28                         box.style.height = box.clientHeight + 10 + "px";
29                     }
30                 };
31                 /**
32                  * 该方法可以解决火狐浏览器滚动条，但IE8不支持
33                  */
34                 bind(box, "DOMMouseScroll", box.onmousewheel);
35                 event.preventDefault && event.preventDefault();
36 
37                 /**
38                  * 当滚轮滚动时，如果浏览器有滚动条，会随之滚动
39                  * 取消方法：return false,但是火狐不支持
40                  */
41                 return false;
42             };
43 
44             function bind(obj, eventStr, callback) {
45                 //obj.addEventListener? obj.addEventListener(eventStr,callback,false):obj.attachEvent("on"+eventStr,callback);
46                 if (obj.addEventListener) {
47                     obj.addEventListener(eventStr, callback, false)
48                 } else {
49                     obj.attachEvent("on" + eventStr, function() {
50                         callback.call(obj);
51                     })
52                 }
53             }
54         </script>
55     </head>
56     <body style="height: 1000px;">
57         <div id="box"></div>
58     </body>
59 </html>

 

posted @ 2021-03-12 23:12  柠檬！  阅读(370)  评论(0)    收藏  举报