onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
但是火狐不支持该属性
在火狐中需要使用DOMMouseScroll来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
判断鼠标滚轮滚动的方向
event.wheelDelta可以获取鼠标滚轮滚动的方向
向上滚正值
向下滚负值
wheelDelta这个值我们不看大小,只看正负
wheelDelta火狐不支持
在火狐中使用event.detail来获取滚动的方向
向上滚是负值
向下滚是正值
使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
需要使用event来取消默认行为
event.preventDefault();
但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
<style> #box1{ 100px; height: 100px; background-color: #FF0000; } </style> <script type="text/javascript"> window.onload=function(){ var box1=document.getElementById('box1'); //正常浏览器通过onmousewheel来绑定鼠标滚轮滚动的事件(除火狐) box1.onmousewheel=function(event){ // alert("滚了") event=event||window.event; //event.wheelDelta是兼容一般浏览器(不兼容火狐) 向上是正值,向下是负值 //event.detail兼容火狐 向上是负值,向下是正值 if(event.wheelDelta>0 ||event.detail<0 ) { box1.style.height=box1.clientHeight-10+'px'; } else{ box1.style.height=box1.clientHeight+10+'px'; } //取消默认事件,避免浏览器有滚动条时触发浏览器滚动条 //event.preventDefault不兼容IE8及以下所以判断 event.preventDefault&&event.preventDefault(); //不能用的情况下用return false来取消默认事件 return false; } //在火狐中需要使用DOMMouseScroll来绑定滚动事件 box1.addEventListener("DOMMouseScroll",box1.onmousewheel); } </script> </head> <body> <div id="box1"></div> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> <br /><br /><br /><br /> </body>