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

Question

今天，我在Microsoft的Edge浏览器中发现了一些非常奇怪的行为，其中Wheel事件的deltax值显然是反向的！这特别令人惊讶，因为这与我测试过的所有其他浏览器都不一致，包括返回预期值的Internet Explorer11。

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

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

• IE11
• 边缘

为什么会这样，有没有解决办法来处理浏览器兼容性问题？有没有一种方法来检测这一点？这种行为是bug，还是在某处有记录？

null

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的正确签名，就可以保证将来的安全。