处理奇怪的倒车轮事件deltaX在微软Edge浏览器

Dealing with bizarrely inverted wheel event deltaX in Microsoft Edge browser?

本文关键字：deltaX 微软 Edge 浏览器 事件 处理      更新时间：2023-09-26

今天我在微软的Edge浏览器中发现了一些非常奇怪的行为，其中wheel事件的deltaX值显然是倒置的!这特别令人惊讶，因为这与我测试过的所有其他浏览器都不一致，包括返回预期值的Internet Explorer 11。

查看此问题的实际情况相当简单，只需运行以下代码，并使用鼠标滚轮或触控板。

window.addEventListener('wheel', function(e) {
    console.log(e.deltaX, e.deltaY);
});

为了方便起见，我创建了一个完整的页面示例(代码段在这方面很棘手):

全页工作示例

在Edge、IE和其他浏览器中，向下滚动给出正值，向上滚动给出负值。然而，在Edge中，向左滚动为正值，向右滚动为负值，这与其他浏览器(包括IE11及以下版本)完全相反。

我制作了一些GIF视频来展示这个问题，链接文件大小

  • IE11
<标题>:

为什么会这样，有没有解决浏览器兼容性问题的办法?是否有一种方法可以检测到这一点?这种行为是一个bug，还是在某处被记录?

规范强烈建议这实际上是不正确的行为:

如果用户代理滚动作为wheel事件的默认动作，那么delta的符号应该由右坐标系统给出，其中正X, Y和Z轴分别指向文档的最右边缘，最底边缘和最远深度(远离用户)。

指出:

  • 我在Windows 10虚拟机和本机笔记本电脑上测试过，两者的行为都是一样的。
  • 我很确定这与"自然"/反向滚动(在所有系统和虚拟机主机上测试，只发生在一个轴上)无关。
    • 另一方面，我不知道deltaZ是否倒置或甚至支持，我缺乏这样的输入设备。
<标题>错误报告:

我已经向微软报告了这个bug。它已经被分配给别人了，所以希望它能被修复。

当我们等待微软的官方回应时，希望以更新的形式解决这个问题，我已经找到了一种方法来检查浏览器是否报告了一个错误的反向deltaX。

Edge还增加了对非标准wheelDeltaX, wheelDeltaY和wheelDelta属性的支持，这些属性也可以在Chrome中找到。与deltaX不同，这些值是正确的，但指的是实际的车轮变化，而不是计算结果。虽然它们的实际值没什么意义，但我们可以从中推断出正确的符号值。

在Chrome中，deltaX和wheelDeltaX正确地具有不同的符号值，因此当一个为负时，另一个为正。这意味着如果两个值都为负或都为正，则deltaX的符号不正确，因为它目前在Edge中。因此，我们可以使用这个属性来检测不正确的反转值并取消反转。

下面是我创建的一个包装器函数来解决这个问题。

function wheelDeltaX(e) {
    // Get the reported deltaX.
    var r = e.deltaX;
    // In Edge, the deltaX incorrectly matches wheelDeltaX sign.
    // If both value signs match then uninvert it.
    var wheelDeltaX;
    if (
        r &&
        (wheelDeltaX = e.wheelDeltaX) &&
        (
            (r < 0 && wheelDeltaX < 0) ||
            (r > 0 && wheelDeltaX > 0)
        )
    ) {
        r = -r;
    }
    return r;
}

只要Edge保留wheelDeltaX的正确签名，当他们有希望解决这个问题时，这个应该是未来的。

相关文章：