最近在用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中的实践
下面是代码,自行参考:
ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.native.prevent="handleScroll"
>
export default {
name: "ScrollPane",
data() {
return {
left: 0
};
},
methods: {
handleScroll(e) {
// wheelDelta:获取滚轮滚动方向,向上120,向下-120,但为常量,与滚轮速率无关
// deltaY:垂直滚动幅度,正值向下滚动。电脑鼠标滚轮垂直行数默认值是3
// wheelDelta只有部分浏览器支持,deltaY几乎所有浏览器都支持
const eventDelta = e.wheelDelta || -e.deltaY * 40;
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap;
// 0到scrollLeft为滚动区域隐藏部分
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
}
}
};