js 鼠标滑轮滚动事件

最新推荐文章于 2024-07-22 17:30:43 发布

神奇大叔

最新推荐文章于 2024-07-22 17:30:43 发布

阅读量564

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103341625

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

鼠标滚动事件

	**非火狐**
	.onmousewheel='操作'
	鼠标方向
		event.wheelDelta;   //在火狐下无值
			鼠标往上滚 ,120   //按其整倍数设置滚动快慢
			鼠标往下滚。-120
	
	**火狐**
		dom2事件
			.addEventListener('DOMMouseScroll',function(){
				.innerHTML=event.detail;
			},false)
		鼠标方向
			event.detail
			 -3,滚动向上
			 3，滚动向下
			 
兼容性写法
	见程序

代码示例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				height:200px;
				width:200px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			
		</div>
		<script>
			var box=document.querySelector(".box");
/*			box.onmousewheel=function(event){
				var event=event||window.event;
				
				box.innerHTML=event.wheelDelta;
			}
			
			try{
				box.addEventListener("DOMMouseScroll",function(event){
					var event=event||window.event;
					
					console.log(event.detail);
				},false);
			}catch(error)
			{
				console.log(error);
			}*/
			
			function mouseScroll()
			{
				var event=event||window.event;
				
				var direction=0;
				if(event.wheelDelta)
				{
					direction=event.wheelDelta>0 ? 1:-1;
					console.log(direction);
				}else{
					//火狐
					direction=event.detail<0 ?1:-1;
					console.log(direction);
				}
				
				
			}
			
			box.onmousewheel=mouseScroll;
			try{   //这么写原因是，ie8以下dom2会报错
				box.addEventListener('DOMMouseScroll',mouseScroll,false);
				
			}catch(error)
			{
				console.log("a");
			}
			
		
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 鼠标滑轮滚动事件

鼠标滚动事件 **非火狐** .onmousewheel='操作' 鼠标方向 even.wheelDelta; //在火狐下无值鼠标往上滚 ,120 //按其整倍数设置滚动快慢鼠标往下滚。-120 **火狐** dom2事件 .addEventListener('DOMMouseScroll',function(){ .innerHTML...
复制链接

扫一扫

专栏目录