滚轮滚动事件
程序员文章站
2022-05-29 08:05:06
滚轮滚动事件 ~~~javascript ~~~ ......
滚轮滚动事件
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: skyblue; } </style> <script type="text/javascript"> window.onload=function(){ // 当鼠标滚轮向下滚动时,box1变长 // 当滚轮向上滚动时,box1变短 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.datail来获取滚动 // 向上滚-3 向下滚3 // alert(event.detail); // 判断鼠标滚轮滚动的方向 if(event.wheeldelta > 0 || event.detail <0){ // alert("向上") box1.style.height=box1.clientheight-10+"px"; }else{ box1.style.height=box1.clientheight+10+"px"; } /* 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动 这是浏览起的默认行为 如果不希望发生 可以取消 */ return false; // 使用addeventlistener()方法绑定响应函数,取消默认行为时不能使用return return false; // 需要使用event来取笑默认行为 event.preventdefault(); // ie8不支持event.preventdefault(); event.preventdefault&&event.preventdefault(); } bind(box1,"dommousescroll",function(){ alert(1); }) } function bind(obj,eventstr,callback){ if(obj.addeventlistener){ // 大部分浏览器兼容的方式 obj.addeventlistener(eventstr,callback,false); }else{ /* this是谁由调用方式决定的 callbank.call(obj) */ // ie8及以下 obj.attachevent("on"+eventstr,function(){ // 在匿名函数中调用回掉函数 callback.call(obj); }); } } </script> </head> <body> <div id="box1"></div> </body> </html>