今天我在微软的Edge浏览器中发现了一些非常奇怪的行为,即
要查看此问题的实际情况非常简单,只需运行以下代码,然后使用鼠标滚轮或触摸板。
为了方便起见,我创建了一个全页面示例(代码片段对此很棘手):
我制作了一些GIF视频来展示这个问题,链接了文件大小。 问题是:
为什么会这样,是否有解决浏览器兼容性问题的方法?是否有一种方法可以检测到这个特性?这种行为是一个错误还是有文档记录?
deltaX
值对于wheel
事件似乎是倒置的!这特别令人惊讶,因为这与我测试过的所有其他浏览器都不一致,包括返回预期值的Internet Explorer 11。要查看此问题的实际情况非常简单,只需运行以下代码,然后使用鼠标滚轮或触摸板。
window.addEventListener('wheel', function(e) {
console.log(e.deltaX, e.deltaY);
});
为了方便起见,我创建了一个全页面示例(代码片段对此很棘手):
全页面工作示例
向下滚动会产生正值,向上滚动会产生负值,这在Edge、IE和其他浏览器中都是预期的。然而,在Edge中,向左滚动会产生正值,向右滚动会产生负值,与其他所有浏览器(包括IE11及以下版本)完全相反。我制作了一些GIF视频来展示这个问题,链接了文件大小。 问题是:
为什么会这样,是否有解决浏览器兼容性问题的方法?是否有一种方法可以检测到这个特性?这种行为是一个错误还是有文档记录?
如果用户代理以鼠标滚轮事件的默认操作滚动,则 delta 的符号应由一个右手坐标系给出,其中正 X、Y 和 Z 轴分别指向文档的最右边缘、最底部边缘和最远深度(远离用户)。
注释:
- 我在 Windows 10 虚拟机和本机笔记本电脑上都测试过了,它们的行为都是相同的。
- 我相当确定这与“自然”/倒置滚动无关(在所有测试的系统和虚拟机主机上都关闭,并且仅在一个轴上发生)。
- 顺便说一句,我不知道
deltaZ
是否被倒置或是否支持,因为我没有这样的输入设备。
错误报告:
我已在此处向 Microsoft 报告了此错误。 它已被分配给某个人,希望能够修复。