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

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

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

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

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

 

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

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

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

---

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

---

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

 

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

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

解释：

图中1指的是：

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

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

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

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

图中2指的是：

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

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

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

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

 

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