js滚轮事件

最新推荐文章于 2024-07-25 12:43:51 发布

❀XXH❀

最新推荐文章于 2024-07-25 12:43:51 发布

阅读量160

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/xxhsym/article/details/104659302

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏


<style type="text/css">
#box1{
width:150px;
height:150px;
background-color:yellowGreen;
}
</style>


<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
/*
当鼠标滚轮向下滚动时，box1变长
当鼠标滚轮向上滚动时，box1变短
*/
box1.onmousewheel=function(event){
/*
为box1绑定一个鼠标滚轮的事件
onmousewheel鼠标滚动事件，会在滚动时触发，但火狐不支持该属性
在火狐中需要使用DOMMouseScroll 来绑定滚轮事件
该事件需要通过addEventListener()函数来绑定  
*/


//判断滚轮滚动方向
event=event||window.event;
//event.wheelDelta可以获取鼠标滚轮的方向。向上120，下-120,。
//火狐不支持，支持detail，通过使用event，向上-3，向下3.
if(event.wheelDelta>0||event.detail<0){
//向上滚box1变短
box1.style.height=box1.clientHeight-10+"px";

} 
else{
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{
 obj.attachEvent("on"+eventStr,function(){
 callback.call(obj);
 })
}
}
</script>


 <body>
<div id="box1"></div>
  </body>

❀XXH❀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js滚轮事件

<style type="text/css">#box1{width:150px;height:150px;background-color:yellowGreen;}</style><script type="text/javascript">window.onload=function(){var box1=document.getE...
复制链接

扫一扫

专栏目录