wheel events的
deltaX值显然是倒置的！这是特别令人惊讶的,因为这与我曾经测试的其他浏览器不兼容,包括返回预期值的Internet Explorer 11.
看到这个问题在操作上相当简单,只需运行以下代码,并使用鼠标滚轮或触控板.
window.addEventListener('wheel',function(e) {
console.log(e.deltaX,e.deltaY);
});
为了方便起见,我创建了一个全页面的示例(片段对此而言很棘手)：
向下滚动给出了正值,并且在Edge,IE和其他浏览器中预期会产生负值.然而,在Edge Wheel左边给出一个正值,右边是一个负值,与其他浏览器完全相反(IE11及以下的包含).
问题：
为什么是这样的,是否有解决方案来处理浏览器兼容性问题？有没有办法检测这个特征？这个行为是一个错误,还是记录在某个地方？
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.它被分配给某人,所以希望它会被修复.
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的正确签名,这应该是面向未来的.
