javascript - 处理 Microsoft Edge 浏览器中奇怪的倒转轮事件 deltaX？

Question

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

实际查看此问题非常简单，只需运行以下代码，并使用鼠标滚轮或触控板即可。

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

为了您的方便，我创建了一个整页示例(片段对此很棘手):

Fullpage Working Example

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

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

• IE11
• Edge

问题:

为什么会这样，有没有解决浏览器兼容性问题的办法？有没有办法对此进行特征检测？此行为是错误，还是在某处记录？

The spec strongly suggests this is in-fact incorrect behavior :

If a user agent scrolls as the default action of the wheel event then the sign of the delta SHOULD be given by a right-hand coordinate system where positive X, Y, and Z axes are directed towards the right-most edge, bottom-most edge, and farthest depth (away from the user) of the document, respectively.

注意事项:

• 我已经在 Windows 10 虚拟机和 native 笔记本电脑上对此进行了测试，两者的行为相同。
• 我有理由相信这与“自然”/反向滚动无关(在测试的所有系统和 VM 主机上关闭，并且只发生在一个轴上)。
• 附带说明一下，我不知道 deltaZ 是否被反转或什至支持开始，我缺少这样的输入设备。

错误报告:

I've reported the bug to Microsoft here.它已分配给某人，因此希望它会被修复。

Answer 1

虽然我们正在等待 Microsoft 的官方回应(希望以更新的形式解决问题)，但我找到了一种方法来检查浏览器是否报告了错误反转的 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 的正确签名，这应该是面向 future 的。