如何处理 Microsoft Edge 浏览器中反常翻转的轮事件 deltaX？

Question

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

要查看此问题的实际情况非常简单，只需运行以下代码，然后使用鼠标滚轮或触摸板。

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

为了方便起见，我创建了一个全页面示例（代码片段对此很棘手）：

全页面工作示例

向下滚动会产生正值，向上滚动会产生负值，这在Edge、IE和其他浏览器中都是预期的。然而，在Edge中，向左滚动会产生正值，向右滚动会产生负值，与其他所有浏览器（包括IE11及以下版本）完全相反。

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

• IE11
• Edge

问题是：

为什么会这样，是否有解决浏览器兼容性问题的方法？是否有一种方法可以检测到这个特性？这种行为是一个错误还是有文档记录？

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

如果用户代理以鼠标滚轮事件的默认操作滚动，则 delta 的符号应由一个右手坐标系给出，其中正 X、Y 和 Z 轴分别指向文档的最右边缘、最底部边缘和最远深度（远离用户）。

注释：

• 我在 Windows 10 虚拟机和本机笔记本电脑上都测试过了，它们的行为都是相同的。
• 我相当确定这与“自然”/倒置滚动无关（在所有测试的系统和虚拟机主机上都关闭，并且仅在一个轴上发生）。
• 顺便说一句，我不知道 deltaZ 是否被倒置或是否支持，因为我没有这样的输入设备。

错误报告：

我已在此处向 Microsoft 报告了此错误。 它已被分配给某个人，希望能够修复。

- Alexander O'Mara

---

你已经将它报告为一个错误了吗？ - Bergi

@Bergi 还没有，我其实不确定在哪里这样做。 - Alexander O'Mara

嘿，这里甚至有一个相关的SO问题 :-) 建议你在这里报告它：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ - Bergi

@Bergi 很好，我等一下会在那里开一个问题，现在我相对确定这是一个 bug。希望能找到一些解决方法，因为现在反转可能意味着未来必须再次反转。 - Alexander O'Mara

Answer 1

在我们等待微软官方回应并希望以解决问题的形式更新时，我找到了一种方法可以检查浏览器是否报告了错误倒置的deltaX。

Edge还添加了对Chrome中发现的非标准wheelDeltaX，wheelDeltaY和wheelDelta属性的支持。与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的正确签名，这个问题就能够被未来所解决。

- Alexander O'Mara