JS鼠标滚轮事件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>表单事件</title>
 6 
 7 
 8 <script>
 9 
10  
11 window.onload = function(){
12     
13     //鼠标滚动事件绑定及检测
14     var mainSlideIndex = 0;
15     var mainSlideGoing = false;
16     var mainSlideDelay = 0;
17     var mainSlideTimer =  null;
18     var scrollFunc = function (ev) {  
19         ev = ev || window.event;  
20         if (ev.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
21             if (ev.wheelDelta > 0) { //当滑轮向上滚动时  
22                 alert("滑轮向上滚动"); 
23             }  
24             if (ev.wheelDelta < 0) { //当滑轮向下滚动时  
25                 alert("滑轮向下滚动 ie chrom");
26             }  
27         } else if (ev.detail) {  //Firefox滑轮事件  
28             if (ev.detail> 0) { //当滑轮向下滚动时  
29                 alert("滑轮向下滚动")
30             }  
31             if (ev.detail< 0) { //当滑轮向上滚动时  
32                 alert("滑轮向上滚动");
33             }  
34         }  
35     }  
36     //给页面绑定滑轮滚动事件  
37     if (document.addEventListener) {//firefox  
38         document.addEventListener('DOMMouseScroll', scrollFunc, false);  
39     }  
40     //滚动滑轮触发scrollFunc方法  //ie 谷歌  
41     window.onmousewheel = document.onmousewheel = scrollFunc; 
42     
43     
44 }
45 
46 
47 </script>
48 
49 </head>
50 
51 <body>
52     <div id="content" style="height:2000px"></div>
53 </body>
54 
55 
56 </html>
转发请备注出处
【公众号：缃言的调调】