<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: green;
}
</style>
<script type="text/javascript">
window.onload=function(){
//box1绑定单机响应函数
var box1=document.getElementById("box1")
/*
* 当下滚,变短,反边长
* onmousewheel火狐不支持,火狐需要DOMMouseScroll
* 该事件要用addEventListener()函数绑定
*/
box1.onmousewheel=function(event){
event=event||window.event
/*
* event.wheelDelta 获取滚方向
* 上120,下-120
* 火狐:
* event.datail
* 3.-3
*
*/
if(event.wheelDelta >0||event.datail>0){
box1.style.height=box1.clientHeight-10+"px"
}else{
box1.style.height=box1.clientHeight+10+"px"
}
/*
* 当有滚动条时,会出现异常,若要在滚动时,滚动条不变,择return false即可
*/
event.preventDefault()&&event.preventDefault()//火狐可以用它
return false
/*
* IE8没有event.preventDefault()方法,要event.preventDefault()&&event.preventDefault()
* 有则继续,无责不执行
*/
};
bind(box1,"DOMMouseScroll",box1.onmousewheel)
function bind( obj,eventStr,callBack){
//大部分
if(obj.addEventListener){
obj.addEventListener(eventStr,callBack,false);
}else{
//IE8及以下
obj.attachEvent("on"+eventStr,function(){
callBack()
// 修改this为绑定对象
})
}
}
}
</script>
<body>
<div id="box1">
我是box1
</div>
</body>
</html>
鼠标滚动,解决IE8,火狐异常不支持问题event.preventDefault()
最新推荐文章于 2021-10-08 09:57:15 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)