鼠标滚轮事件

最新推荐文章于 2024-03-25 09:02:34 发布

memedadexixaofeifei

最新推荐文章于 2024-03-25 09:02:34 发布

阅读量160

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/memedadexixaofeifei/article/details/84928250

版权

原生js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标滚轮事件</title>
	<style type="text/css">
		#box{
			width: 400px;
			height: 400px;
			background: red;
		}
	</style>
	</head>
	<body style="height: 2000px;">
		<div id="box">
			
		</div>
		<script type="text/javascript">
			/*
			 
			 * 在 ie和chore下面是：onmosewheel  event.wheelDelta 判断鼠标滚轮的上下  返回值为正向下滚动，负为向上滚动
			 * 在firefix:DOMMouseScroll 事件绑定必须使用addEventListener  event.detial
			 * 
			 * 
			 * return false 阻止的是用 obj.on事件名称 = function  所触发的默认行为
			 * addEventListener 事件的阻止默认行为是 preventDefault
			 * */
			var oBox = document.getElementById("box");
		
			fn1 = function(ev){
				
				var ev = ev || event;
				
				if(ev.wheelDelta){
					
					if(ev.wheelDelta>0){
						console.log("向下滚动");
						this.style.height = this.offsetHeight+10+"px";
					}else{
						console.log("向上滚动");
						this.style.height = this.offsetHeight-10+"px";
					}
				}else{
					if(ev.detail>0){
						console.log("ff向下滚动");
						this.style.height = this.offsetHeight+10+"px";
					}else{
						console.log("ff向上滚动");
						this.style.height = this.offsetHeight-10+"px";
					}
				}
				if(ev.preventDefault){//判断是否有这个方法
					ev.preventDefault();
				}
				return false;//阻止默认行为  当浏览器出现滚动条时
			}
			
			if(window.navigator.userAgent.indexOf("Firefox") != -1){
				
				oBox.addEventListener("DOMMouseScroll",fn1,false);
			}else{
				
				oBox.onmousewheel = fn1;		
			}
		</script>
	</body>
</html>