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

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

看到这个问题在操作上相当简单,只需运行以下代码,并使用鼠标滚轮或触控板.

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

为了方便起见,我创建了一个全页面的示例(片段对此而言很棘手)：

Fullpage Working Example

向下滚动给出了正值,并且在Edge,IE和其他浏览器中预期会产生负值.然而,在Edge Wheel左边给出一个正值,右边是一个负值,与其他浏览器完全相反(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 VM和本机笔记本电脑中测试过,两者的行为是一样的.
>我相当肯定这与“自然”/倒置滚动无关(所有系统和VM主机测试关闭,只发生在一个轴上).
>在旁注中,我不知道deltaZ是颠倒还是甚至支持开始,我缺乏这样的输入设备.

错误报告：

I’ve reported the bug to Microsoft here.它被分配给某人,所以希望它会被修复.

当我们等待Microsoft的正式回复时,希望以更新的形式解决问题,我已经找到一种方法来检查浏览器是否报告了一个不正确的倒数deltaX.

Edge还增加了对非标准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？

相关推荐