一文读懂鼠标滚轮事件（wheelEvent）一、测试目标二、测试环境三、测试属性四、结果分析五、结论六、应用领域七、VUE中的实践

62 阅读 0 评论 41 点赞

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

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

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

前段时间使用canvas做滚动条控件，添加滚轮事件时，查阅了一些资料，发现大都是文档描述或简单示例ÿ

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。