鼠标滚轮事件

前几天一个同学问我鼠标滚动事件。想做一个通过滚动鼠标的滚轮，来旋转导航。

查了点资料，完成了同学的问题。

不过，作为一个知识点，也记录下来，以加强印象。

鼠标滚轮事件，就是 wheel （滚轮）事件。

注：MDN（Molliza的开发者社区）不推荐使用传统的 onmousescroll 事件。作为技术强迫着患者，我也不建议用了，推荐使用 wheel 。

wheel 的事件对象有 4 个属性：

1. deltaX，鼠标滚轮左右摆动，本属性是只读的。 负值，向左；正值，向右。（正负方向，跟系统的x坐标保持一致。）
2. deltaY，鼠标滚轮上下滚动，只读。负值，向上；正值，向下。个人觉得 deltaY 是用的最多的属性。
3. deltaX。不解释，感觉用的少。
4. deltaMode，属性返回一个数字，表示滚动值 （deltaX，deltaY，deltaZ） 的长度单位。
   0 =像素
   1 =行
   2 =页

不过，使用 wheel 事件，浏览器往往会给一个警告。

这是因为，wheel 事件自己本身就有默认操作，就是滚动页面。浏览器不确定用户执行这个事件是否要触发还是要阻止默认操作发生，所以会给出这个警告。

可以给 addEventListener 添加第三个参数 { passive:false } 来去掉这个警告。就是明确的告诉浏览器，如果要阻止默认操作，有效！

    1

不过，浏览器不同，每次滚动产生的数值也不同。

chrome（77，目前的最新版本），每次滚动的值都是  125，或者 -125

firefox，每次滚动值 3，-3 。

Edge，IE11，则是 正负 70 左右。

不过，无论值是多少，都可以通过正负 判断滚轮是向上还是向下滚动，继而继续一下步的特效。