Fullpage Working Example

Question

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

在操作中看到此问题非常简单，只需运行以下代码，然后使用鼠标滚轮或触控板。

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

为了您的方便，我创建了一个完整的页面示例（片段对此非常棘手）：

Fullpage Working Example

向下倾斜会给出正值，并且在Edge，IE和其他浏览器中按预期给出负值。但是，在Edge wheeling中，左侧给出正值，右侧为负值，与其他浏览器完全相反（包括IE11及以下）。

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

IE11
Edge

问题：

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

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

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

说明：

我在Windows 10 VM和原生笔记本电脑上都进行了测试，两者的行为相同。
我有理由相信这与“自然”/反向滚动无关（在测试的所有系统和VM主机上关闭，并且只发生在一个轴上）。
在旁注中，我不知道deltaZ是否被反转或甚至支持开头，我缺少这样的输入设备。

错误报告：

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

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的正确签名，此应可以面向未来。

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

Fullpage Working Example

问题：

说明：

错误报告：

1 个答案: