鼠标滚动，解决IE8，火狐异常不支持问题event.preventDefault()

最新推荐文章于 2021-10-08 09:57:15 发布

原创最新推荐文章于 2021-10-08 09:57:15 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客详细介绍了如何使用JavaScript监听并处理鼠标滚轮事件，通过调整元素的高度来响应滚轮上滑和下滑操作。文章涵盖了跨浏览器的兼容性处理，包括使用`addEventListener`和`attachEvent`为`box1`元素绑定`DOMMouseScroll`和`mousewheel`事件，以及处理滚轮方向和防止默认滚动行为的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#box1{
			width: 300px;
			height: 300px;
			background-color: green;
		}
		
		
	</style>
	<script type="text/javascript">
		window.onload=function(){
			
			//box1绑定单机响应函数
			var  box1=document.getElementById("box1")
			/*
			 * 当下滚，变短，反边长
			 * onmousewheel火狐不支持，火狐需要DOMMouseScroll
			 * 该事件要用addEventListener()函数绑定
			 */
			box1.onmousewheel=function(event){
				event=event||window.event
				/*
				 * event.wheelDelta 获取滚方向
				 * 上120，下-120
				 * 火狐：
				 * event.datail
				 * 3.-3
				 * 
				 */
				if(event.wheelDelta >0||event.datail>0){
					box1.style.height=box1.clientHeight-10+"px"
				}else{
					box1.style.height=box1.clientHeight+10+"px"
				}
				/*
				 * 当有滚动条时，会出现异常，若要在滚动时，滚动条不变，择return false即可
				 */
				event.preventDefault()&&event.preventDefault()//火狐可以用它
				return false
				/*
				 * IE8没有event.preventDefault()方法，要event.preventDefault()&&event.preventDefault()
				 * 有则继续，无责不执行
				 */
				
			};
			bind(box1,"DOMMouseScroll",box1.onmousewheel)
		
			function bind( obj,eventStr,callBack){
				//大部分
				if(obj.addEventListener){
					obj.addEventListener(eventStr,callBack,false);
				}else{
					//IE8及以下
				obj.attachEvent("on"+eventStr,function(){
					callBack()
//					修改this为绑定对象
				})
				
				}
			
		}
			}
	</script>
		

		
	
	<body>
		<div id="box1">
			我是box1
		</div>
		
		
	</body>
</html>