js的滚轮事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html><script type="text/javascript">//滚轮事属于鼠标事件

MisteryZhang

3909人浏览 · 2022-03-26 10:22:22

MisteryZhang · 2022-03-26 10:22:22 发布

<!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>