在Microsoft Edge浏览器中处理奇怪的倒车轮事件deltaX？

Question

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

看到这个问题很简单,只需运行以下代码,然后使用鼠标滚轮或触控板即可.

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

为方便起见,我创建了一个完整的页面示例(片段对此非常棘手):

全页工作示例

向下滑动会给出正值,并且在Edge,IE和其他浏览器中提供负值会产生预期值.但是,在Edge中,left左侧给出正值,右侧为负值,与其他浏览器完全相反(包括IE11及以下).

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

• IE11
• 边缘

问题:

为什么会这样,是否有处理浏览器兼容性问题的解决方案？有没有办法对功能进行检测？这种行为是一个错误,还是在某处记录？

该规范强烈暗示这实际上是不正确的行为:

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

笔记:

• 我已经在Windows 10 VM和原生笔记本电脑上测试了这一点,两者的行为都是一样的.
• 我有理由相信这与"自然"/反向滚动无关(在测试的所有系统和VM主机上关闭,并且仅在一个轴上发生).
• 在侧面说明,我不知道是否deltaZ倒置或甚至支持开始,我缺乏这样的输入设备.

错误报告:

我在这里向微软报告了这个漏洞.它被分配给某人,所以希望它将被修复.

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希望解决问题时保留正确的签名，这应该是面向未来的。