一文读懂鼠标滚轮事件（wheelEvent）

doodlewind 发布于2019-08-23 14:06 / 772人阅读

摘要：下面正式推荐大神的博文前段时间使用做滚动条控件，添加滚轮事件时，查阅了一些资料，发现大都是文档描述或简单示例，对于开发者还是不够。一测试目标探索事件中常用属性的有效性，垂直步进算法滑动幅度以及与电脑个性化设置的关联。

最近在用VUE写一个后台管理系统，顶部标签页涉及鼠标滚轮事件，由于每个浏览器对滚轮事件的处理方式不一样，个人对这个又不懂，折腾了很久，参考了大神的代码，也把百度翻烂了，找到了一篇陈旧的博文（其实是主题很土，发布时间未知）。写得非常清楚，解决了我的问题。
先看看我标签页的界面：

如果打开的标签超过滚动区域宽度，会显示滚动条，支持鼠标滚轮左右滚动。这里涉及wheelEvent的2个属性：wheelDelta 和 deltaY，后面转载的博文会详细测试。
首先在MDN网站看到了官方概念：

这里获得2个信息：
①传统的mousewheel事件已经充用，请使用wheel事件。
②不要通过判断滚轮方向来推断文档滚动方向。
下面正式推荐大神的博文：

前段时间使用canvas做滚动条控件，添加滚轮事件时，查阅了一些资料，发现大都是文档描述或简单示例，对于开发者还是不够。wheelEvent对象中的一些属性（比如wheelDelta、detail等）虽然官方文档有完整描述，但部分或大部分浏览器厂商并没有（真正）实现，这就很容易诱导大家错误使用。所以我针对当前常用浏览器重新测试了一下。

一、测试目标

探索wheelEvent事件中常用属性的有效性，垂直步进算法（滑动幅度）以及与电脑个性化设置的关联。

二、测试环境

Windows操作系统，Firefox54、Chrome59、IE9、IE10、IE11、Edge浏览器。

三、测试属性

deltaY、detail、wheelDelta。

电脑个性化设置：操作系统鼠标滑轮垂直行数n（默认值：3）

辅助关联参数：浏览器窗口高度H用来验证deltaY的推导公式

测试代码：

var onwheel = function(e){
     var _log = "",
         _ie9 = navigator.userAgent.indexOf("MSIE 9.0") > 0,
         _h = _ie9 ? window.innerHeight : document.body.clientHeight;  //兼容IE9

     _log += "deltaY:" + e.deltaY;
     _log += "|wheelDelta:" + e.wheelDelta;
     _log += "|detail:" + e.detail;   
     _log += "|H:" + _h;

　　　console.log(_log);
};

document.addEventListener("wheel", onwheel, false);

测试结果：

四、结果分析

1、Firefox有效属性deltaY，正值向下滚动，绝对值为操作系统鼠标滑轮垂直行数设置；

2、IE系列有效属性deltaY，正值向下滚动，绝对值为滚动幅度（像素数，计算方式：窗口高度×鼠标滚轮垂直行数÷20）

3、Edge有效属性deltaY，同IE系列，并且支持wheelDelta属性（向上120，向下-120，但为常量，只能判断方向，与滚轮速率无关，有种被欺骗的感觉。。。）

4、Chrome有效属性deltaY，正值向下滚动，绝对值为滚动幅度（像素数，计算方式：100×鼠标滚轮垂直行数÷3）并且支持wheelDelta,与Edge一样，也是假值；

5、测试的几款浏览器deltaY都与操作系统鼠标滚轮垂直行数正相关；

6、IE系列与Edge浏览器deltaY与浏览器窗口高度相关（浏览器以当前窗口可容20行，来动态计算行高），Chrome与窗口高度无关；

五、结论

1、可靠属性：deltaY，方向判断方法一致（正值向下滚动，负值向上滚动），与操作系统鼠标设置有关联，但需注意绝对值算法不统一

2、无用属性：detail，wheelDelta（未实现，即使Chrome与Edge也是假值，这与mdn、w3c等文档描述有差异，但看网络相关分享、jquery控件等却发现很多人都在使用。。。）

3、功能方面：Firefox能直观反映滚动行数，但不能直观与浏览器默认滚动条保持同步；其他几组浏览器则恰好相反；

4、个人建议：个人认为wheelDelta的最初设计思想很好，电脑鼠标滚轮垂直行数默认值是3，wheelDelta默认值120，即单行行高40px，即使用户电脑做了个性化设置，像素值也不会出现循环小数，避免了Chrome的deltaY设计缺陷，有利于行业规范化，所以建议各浏览器厂商能完整支持wheelDelta这一属性。

六、应用领域

滚动条控件滚轮事件设计：滚轮效果应该有效使用电脑个性化设置

方案一、固定步距（滚动幅度）：按推导公式计算鼠标滚动行数n值，设定固定行高H，幅度=n×H

方案二、嵌入式（与浏览器默认效果同步）：Firefox使用body字号作为行高H，幅度=deltaY×H；其他浏览器，幅度=deltaY

七、VUE中的实践

下面是代码，自行参考：

GPU云服务器云服务器鼠标滚轮事件鼠标滚轮滚轮事件 js 滚轮向上事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100085.html

tinyscrollbar锁滚动问题引出对wheel事件的探索

摘要：锁滚动问题近日做需求，发现一个常用插件突然出毛病了，于是探究了一番个中原因。但在最新版下，准确的说是系统环境下，发生了自定义滚动条锁滚动的问题。是通过监听页面滚轮事件，进一步进行设置内容位置来实现自定义滚动条的。 tinyscrollbar锁滚动问题近日做需求，发现一个常用插件jquery.tinyscrollbar突然出毛病了，于是探究了一番个中原因。出问题的场景在ie，chr...

leanote 2019-08-21 17:18 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

zhoutk 2019-08-02 16:04 评论0 收藏0
浏览器常用事件解析

摘要：之前写过一篇浏览器事件的相关操作和事件运行的原理浏览器事件解析。注意，页面从浏览器缓存加载，并不会触发事件。事件有一个属性，返回一个布尔值。此外，不支持事件，可以使用事件代替。之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件及一些可能的坑。表单事件键盘事件当 , 的值发生变化时触发。此外，打开 contente...

Richard_Gao 2019-08-23 11:52 评论0 收藏0