js的滚轮事件

最新推荐文章于 2024-09-11 11:07:15 发布

钱端攻城狮

最新推荐文章于 2024-09-11 11:07:15 发布

阅读量4k

点赞数

分类专栏： js 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_54932975/article/details/123751480

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

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