【兼容性问题】鼠标滚轮方向的兼容性写法

最新推荐文章于 2022-01-12 16:56:34 发布

Red sun

最新推荐文章于 2022-01-12 16:56:34 发布

阅读量559

点赞数 3

分类专栏： JavaScript 文章标签： JS兼容性问题鼠标滚轮方向的兼容 event.wheelDelta 鼠标滚轮方向兼容性写法不同浏览器的鼠标滚轮方向

本文链接：https://blog.csdn.net/qq_36652405/article/details/87798686

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

【兼容性问题】鼠标滚轮方向的兼容性写法

问题：什么表示滚轮方向？

IE/Chrome中: event.wheelDelta 表示滚轮方向。

FireFox中：event.detail 表示滚轮方向。

在说鼠标滚轮方向的兼容性写法前，先介绍浏览器中鼠标滚轮方向的正负值：

规律1. IE和Chrome：滚轮向上滚，event.wheelDelta的值为正。滚轮向下滚，event.wheelDelta的值为负。

规律2. 火狐：滚轮向上滚，event.detail的值为负。滚轮向下滚，event.detail的值为正。

代码我贴在这，你们可以去浏览器中测试滚轮方向的正负值：

<body>
		<div id="test"></div>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			var testNode = document.querySelector("#test");
			//火狐浏览器
			if(testNode.addEventListener) {

				testNode.addEventListener("DOMMouseScroll", function(ev) {
					ev = ev || event;
					/*
					向上:负
					向下:正
					*/
					console.log(ev.detail);
				})

			}

			//非火狐浏览器
			testNode.onmousewheel = function(ev) {

				ev = ev || event;
				/*
				向上:负
				向下:正
				*/
				console.log(ev.wheelDelta);

			}

		}
	</script>

测试完你会发现方向上就出现了兼容问题，我们必须把火狐浏览器中的滚轮方向做一个兼容性的处理。

我们定义一个变量叫 dir，初始化值为空串。待会我们输出这个dir就知道是否统一方向了

<script type="text/javascript">
		window.onload = function() {
			var testNode = document.querySelector("#test");
			//火狐浏览器  
			/*
				滚轮向上:负
				滚轮向下:正
			*/
			if(testNode.addEventListener) {

				testNode.addEventListener("DOMMouseScroll", fn);

			}
			//非火狐浏览器
			/*
				滚轮向上:正
				滚轮向下:负
			*/
			testNode.onmousewheel = fn;

			function fn(ev) {

				ev = ev || event;
				//定义一个方向，初始值为空串
				var dir = "";
				//非火狐浏览器
				if(ev.wheelDelta) {
					dir = ev.wheelDelta > 0 ? "向上滑了" : "向下滑了";
				}
				//火狐浏览器
				if(ev.detail) {
					dir = ev.detail < 0 ? "向上滑了" : "向下滑了";
				}
				console.log(dir);

			}

		}
	</script>

有同学不知道下图红框框中是什么意思：

解释：

图中1指的是：

首先判断是否能使用ev.wheelDelta，能使用表示在非火狐浏览器中支持event.wheelDelta。

非火狐浏览器鼠标滚轮方向又有以下特性：

IE和Chrome中：滚轮向上滚，event.wheelDelta的值为正。所以控制台会打印 “向上滑了”。

滚轮向下滚，event.wheelDelta的值为负。所以控制台会打印 “向下滑了”。

图中2指的是：

首先判断是否能使用ev.detail，能使用表示在火狐浏览器中支持ev.detail，非火狐浏览器鼠标滚轮方向又有以下特性：

火狐浏览器中：滚轮向上滚，event.detail的值为负，所以控制台会打印 “向上滑了”。

滚轮向下滚，event.detail的值为正。所以控制台会打印 “向下滑了”。

这样我们就通过一个变量dir同步了各浏览器中鼠标滚轮方向。

如果我的文章可以帮到你的话，那我深感荣幸。

Red sun

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【兼容性问题】鼠标滚轮方向的兼容性写法

【兼容性问题】鼠标滚轮方向的兼容性写法问题：什么表示滚轮方向？IE/Chrome中: event.wheelDelta 表示滚轮方向。FireFox中：event.detail 表示滚轮方向。在说鼠标滚轮方向的兼容性写法前，先介绍浏览器中鼠标滚轮方向的正负值：规律1. IE和Chrome：滚轮向上滚，event.wheelDel...
复制链接

扫一扫