最近在用VUE写一个后台管理系统。顶部标签页涉及鼠标滚轮事件。由于各个浏览器对wheel事件的处理方式不同，这个我个人不是很懂，折腾了半天，参考了大神的代码，也百度了一下，找到了一篇老博文（其实是题目很脏，发布时间未知）。写的很清楚，解决了我的问题。先看我的标签页的界面：如果打开的标签页超出了滚动区域的宽度，会显示一个滚动条，支持鼠标滚轮左右滚动。这里涉及到wheelEvent的两个属性：wheelDelta和deltaY，后面转载的博文会详细测试。首先在MDN网站上看到了官方的概念：这里有两条信息：①已经使用了传统的mousewheel事件，请使用wheel事件。②不要通过判断滚轮的方向来推断文档的滚动方向。下面正式推荐大神的博文：前段时间用canvas做滚动条控件。在添加滚轮事件的时候，查了一些资料，发现大多是文档说明或者简单的例子，对开发者来说不够。虽然wheelEvent对象中的一些属性（如wheelDelta、detail等）在官方文档中有完整的描述，但部分或大部分浏览器厂商并没有（真正）实现，这很容易诱导人们错误使用。所以我针对目前常用的浏览器重新进行了测试。1.测试目标探索wheelEvent事件中公共属性的有效性、垂直步进算法（滑动范围）以及与计算机个性化设置的关联。2、测试环境Windows操作系统、Firefox54、Chrome59、IE9、IE10、IE11、Edge浏览器。3.测试属性deltaY、detail、wheelDelta。电脑个性化设置：操作系统鼠标滚轮垂直线数n（默认值：3）辅助相关参数：浏览器窗口高度H用于验证deltaY的推导公式测试代码：varonwheel=function(e){var_log="",_ie9=navigator.userAgent.indexOf("MSIE9.0")>0,_h=_ie9?window.innerHeight:文档.body.clientHeight;//兼容IE9_log+="deltaY:"+e.deltaY;_log+="|wheelDelta:"+e.wheelDelta;_log+="|细节："+e.detail；_log+="|H:"+_h; console.log(_log);};document.addEventListener("wheel",onwheel,false);测试结果：四、结果分析1、Firefox的有效属性deltaY，正值向下滚动，绝对值是操作系统鼠标滚轮垂直行数设置；2、IE系列的有效属性deltaY，正值向下滚动，绝对值为滚动范围（像素个数，计算方法：窗口高度×鼠标滚轮垂直线数÷20）3、有效属性deltaYEdge的和IE系列一样，支持wheelDelta属性（向上120，向下-120，不过是个常量，只能判断方向，与滚轮快慢无关，它感觉被骗了。。。)4.Chrome的有效属性deltaY，正值向下滚动，绝对值为滚动范围（像素数，计算方法：100×鼠标滚轮垂直线数÷3），支持wheelDelta，也就是像Edge这样的错误值；5、几个被测浏览器的deltaY与操作系统中鼠标滚轮的垂直线数呈正相关；6、IE系列和Edge浏览器的deltaY与浏览器窗口高度相关（浏览器可以根据当前窗口可容纳20行动态计算行高），Chrome与窗口高度无关；五、结论1、可靠属性：deltaY，方向判断方法相同（正值向下滚动，负值向上滚动），与操作系统的鼠标设置有关，但需要注意绝对值algorithmisnotUnification2.无用属性：detail，wheelDelta（未实现，连chrome和Edge都是false值，和mdn，w3c等文档的描述不一样，但是看网络相关的分享，jquery控件等.,很多人都在用。。。）3.功能方面：Firefox可以直观的反映滚动行数，但是不能直观的和浏览器默认的滚动条同步；其他浏览器正好相反；4、个人建议：个人认为wheelDelta最初的设计思路很好，电脑鼠标滚轮垂直线数默认值为3，wheelDelta默认值为120，即单行的高度是40px。有利于行业标准化，因此建议各浏览器厂商全面支持wheelDelta属性。6、应用领域滚动条控制滚轮事件设计：使用电脑个性化设置方案滚轮效果要有效1、固定步长（滚动范围）：根据推导公式计算鼠标滚动行数的n值,设置固定行高H,范围=n×H方案2.嵌入式（与浏览器默认效果同步）：Firefox使用body字体大小作为行高H，幅度=deltaY×H；其他浏览器,amplitude=deltaY7.VUE中练习下面是代码,自己参考:
