<!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>
这篇博客详细介绍了如何使用JavaScript监听并处理鼠标滚轮事件，通过调整元素的高度来响应滚轮上滑和下滑操作。文章涵盖了跨浏览器的兼容性处理，包括使用`addEventListener`和`attachEvent`为`box1`元素绑定`DOMMouseScroll`和`mousewheel`事件，以及处理滚轮方向和防止默认滚动行为的方法。
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
