滚轮事件（Js）

最新推荐文章于 2023-07-06 11:32:44 发布

一李

最新推荐文章于 2023-07-06 11:32:44 发布

阅读量206

点赞数

分类专栏：前端 JavaScript 文章标签： scroll

本文链接：https://blog.csdn.net/qq_43641432/article/details/103374054

版权

前端同时被 2 个专栏收录

102 篇文章 1 订阅

订阅专栏

JavaScript

38 篇文章 0 订阅

订阅专栏

整个JsDemo放在一个window.onload中，在整个页面完成加载之后才执行
利用 || 和 && 来解决浏览器不兼容的问题
取消浏览器的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			
			}
			
		</style>
		<script type="text/javascript">
			window.onload  = function(){
				//box1随着滚轮变化
				var  box1 = document.getElementById("box1");
				
				//鼠标滚轮滚动事件--火狐不支持---->DOMMouseScroll调用
				
				box1.onmousewheel = function(){
					//判断鼠标滚动方向
					event = event || window.event;
					
				if(event.wheelData>0||event.detail<0){//只看+-
					box1.style.height = box1.clientHeight - 10+"px";
				}else{
					box1.style.height = box1.clientHeight + 10+"px";
				};
				
				//当滚轮滚动时，滚动条会随之滚动，修改浏览器的默认行为
				
				
				event.preventDefault&&event.preventDefault();//取消默认行为   ie8 不支持
				
				
				return false;
				
				
				
				};
				
				bind(box1,"DOMMousescroll",box1.onmousewheel);
			}
			
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
		</script>
	</head>
	<body style="height: 2000px;">
		
		<div id="box1"></div>
		
	</body>
</html>

一李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚轮事件（Js）

整个JsDemo放在一个window.onload中，在整个页面完成加载之后才执行利用 || 和 && 来解决浏览器不兼容的问题取消浏览器的默认行为 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&gt...
复制链接

扫一扫

专栏目录