js 鼠标滑轮滚动事件

﹏ヽ暗。殇╰゛Y 2021-07-24 13:05 579阅读 0赞

鼠标滚动事件
    
    	**非火狐**
    	.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>