滚轮事件(原生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>