js的滚轮事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//滚轮事属于鼠标事件 只是滚轮兼容性不一样
	//滚轮事件直接加给文档
	document.onmousewheel=function(){
		//注意 wheelDelta不是date
		//此方法不兼容火狐浏览器
		console.log(event.wheelDelta);
		if(event.wheelDelta>0){
			console.log("向上滚动");
		}
		if(event.wheelDelta<0){
			console.log("向下滚动");
		}
	}
	//如何兼容火狐浏览器
	//利用
	document.addEventListener("DOMMouseScroll",function(e){
		//火狐浏览器 事件在参数部分就是e
		console.log("火狐滚轮事件");
		//滚动值
		console.log(e.detail);
		if(e.detail>0){
			console.log("火狐滚轮事件向下滚动");
		}else{
			console.log("火狐滚轮事件向上滚动");
		}//正负值与其他浏览器相反
		//尽量以正负值判断上下滚轮
	});
</script>

前端三剑客
#JS
js的滚轮事件
http://ultracode.cn/2020/11/30/JS/js的滚轮事件/
作者
Win
发布于
2020年11月30日
许可协议