<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ //获取id为box1的div var box1 = document.getElementById("box1"); //为box1绑定一个鼠标滚轮滚动的事件 /* * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， * 但是火狐不支持该属性 * * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件 * 注意该事件需要通过addEventListener()函数来绑定 */ box1.onmousewheel = function(event){ event = event || window.event; //event.wheelDelta 可以获取鼠标滚轮滚动的方向 //向上滚 120 向下滚 -120 //wheelDelta这个值我们不看大小，只看正负 //alert(event.wheelDelta); //wheelDelta这个属性火狐中不支持 //在火狐中使用event.detail来获取滚动的方向 //向上滚 -3 向下滚 3 //alert(event.detail); /* * 当鼠标滚轮向下滚动时，box1变长 * 当滚轮向上滚动时，box1变短 */ //判断鼠标滚轮滚动的方向 if(event.wheelDelta > 0 || event.detail < 0){ //向上滚，box1变短 box1.style.height = box1.clientHeight - 10 + "px"; }else{ //向下滚，box1变长 box1.style.height = box1.clientHeight + 10 + "px"; } /* * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false * 需要使用event来取消默认行为event.preventDefault(); * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错 */ event.preventDefault && event.preventDefault(); /* * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为 */ return false; }; //为火狐绑定滚轮事件 bind(box1,"DOMMouseScroll",box1.onmousewheel); }; function bind(obj , eventStr , callback){ if(obj.addEventListener){ //大部分浏览器兼容的方式 obj.addEventListener(eventStr , callback , false); }else{ /* * this是谁由调用方式决定 * callback.call(obj) */ //IE8及以下 obj.attachEvent("on"+eventStr , function(){ //在匿名函数中调用回调函数 callback.call(obj); }); } } </script> </head> <body style="height: 2000px;"> <div id="box1"></div> </body> </html>