Javascript 在Microsoft Edge浏览器中处理奇怪的反转轮子事件deltaX？

今天，我在微软的Edge浏览器中发现了一些非常奇怪的行为，其中的值显然是颠倒的！这尤其令人惊讶，因为这与我测试过的所有其他浏览器都不一致，包括返回预期值的InternetExplorer11

看到这个问题很简单，只需运行以下代码，并使用鼠标滚轮或轨迹板

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

为方便起见，我创建了一个完整的页面示例（代码片段很难做到这一点）：

向下旋转给出正值，向上旋转给出负值，正如在Edge、IE和其他浏览器中所预期的那样。但是，在Edge wheeling中，左侧为正值，右侧为负值，与其他浏览器（包括IE11及以下）完全相反

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

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

:

如果用户代理滚动作为控制盘事件的默认操作，则增量的符号应由右手坐标系给出，其中正X、Y和Z轴分别指向文档的最右边缘、最底边缘和最远深度（远离用户）

笔记：

• 我在Windows10VM和本机笔记本电脑上都测试过，两者的行为都是一样的
• 我有理由相信这与“自然/反向滚动”无关（在所有测试的系统和VM主机上关闭，并且只在一个轴上发生）
• 顺便说一句，我不知道deltaZ是否是反向的，甚至一开始就不支持，我缺少这样的输入设备

错误报告：

---

它已被分配给某个人，因此希望它能被修复。

当我们等待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;
}

功能轮盘税（e）{
//得到报税单。
var r=e.deltaX；
//在Edge中，deltaX与wheelDeltaX符号不匹配。
//如果两个值符号匹配，则取消转换它。
增值税；
如果(
r&&
（wheelDeltaX=e.wheelDeltaX）&&
(
（r<0和&wheelDeltaX<0）||
（r>0&&wheelDeltaX>0）
)
) {
r=-r；
}
返回r；
}

---

只要Edge在希望解决问题时保留了wheelDeltaX的正确签名，这应该是未来的证明。

您是否已将其报告为错误？@Bergi还没有，我不确定在哪里这样做。他甚至建议：-）您应该报告@Bergi Cool，我稍后会在那里打开一个问题，现在我比较确定这是一个bug。希望能找到一些解决办法，不过，这很糟糕，因为现在反转可能意味着将来必须取消反转。