<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div class="" id="box1"></div>
<script type="text/javascript">
var box1 = document.getElementById('box1');
box1.onmousewheel = function(event) {
// 解决兼容
event = event || window.event
/* 其他浏览器使用event.wheelDelta 来获取鼠标滚动方向,
* 当event.wheelDelta > 0 时是向上滚,event.wheelDelta < 0 时是向下滚;
* 但是 火狐浏览器中不支持此属性;
*/
/* 在火狐浏览器中,使用event.detail 来获取鼠标的滚动方向
* 当event.detail < 0 时是想上滚,当event.detail > 0时是向下滚
*/
//处理兼容可以使用
if(event.wheelDelta > 0 || event.detail < 0) {
//此时是向上滚
}else {
//此时是向下滚
}
/* 当浏览器有滚动条时,元素内的鼠标滚动会触发浏览器滚动条滚动。
* 想要取消浏览器滚动,可以取消浏览器默认事件
* 在使用addEventListener绑定的响应函数使用return false取消默认事件无效;
* 可以使用event来取消默认事件,但是在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);
}else{
obj.attachEvent('on' + eventStr,callback);
}
}
</script>
</body>
</html>
鼠标滚轮事件
最新推荐文章于 2021-08-21 11:42:08 发布