<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #007AFF;
}
body{
height: 2000px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
box1.onmousewheel=function(event){
var event = event || window.event;//兼容ie
if(event.wheelDelta > 0 || event.detail < 0){//兼容火狐detail
console.log("向上滚动了!");
box1.style.height = box1.clientHeight > 10 ? box1.clientHeight - 10 + "px" : box1.clientHeight;
}else{
console.log("向下滚动了!");
box1.style.height = box1.clientHeight + 10 + "px";
};
event.preventDefault && event.preventDefault();//兼容火狐
return false;
};
bind(box1,"DOMMouseScroll",box1.onmousewheel);//兼容火狐DOMMouseScroll
//封装监听事件函数
function bind(obj,methds,callback){
if(obj.addEventListener){
obj.addEventListener(methds,callback,false);
}else{
obj.attachEvent("on" + methds, function(){
callback.call(obj);
})
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
鼠标滚轮滚动事件,兼容IE8和火狐、谷歌
最新推荐文章于 2021-12-03 09:44:56 发布