Javascript wheel事件锁定为水平或垂直移动，不允许对角线移动

Question

我正在尝试使用wheel事件允许PC触控板上的两指移动。这是示例代码：

window.addEventListener('wheel', event => {
    console.log(event.deltaX, event.deltaY)
})

我的期望是，当我在触控板上执行两指移动时，deltaX和deltaY将会改变。我发现，一旦开始两指水平或垂直运动，它就会锁定该类型的运动，并将deltaY强制为0（水平运动）或将deltaX强制为0（垂直运动）。如果您以对角线运动开始，那么它将按预期工作并正确更改deltaX和deltaY。

我不确定这是特定于触控板的问题（我在Surface Book 2上）还是Javascript怪癖，或者我是否缺少某些东西。

您可以在此处看到此操作：https://stackblitz.com/edit/multi-touch-trackpad-gesture

1. 在盒子上水平移动触摸板上的两个手指
2. 将手指放在触摸板上，然后尝试垂直移动（至少在PC / chrome上不能这样做）
3. 垂直然后水平重复
4. 从两个手指对角移动开始，以查看我要寻找的运动范围

Answer 1

w3c spec说

  

当鼠标滚轮绕任何轴旋转时，或当等效的输入设备（例如鼠标球，某些平板电脑或触摸板等）模拟了此类操作时，用户代理必须调度此事件。根据平台和输入设备的不同，对角线车轮增量可以作为具有多个非零轴的单个车轮事件或针对每个非零轴的单独车轮事件来传递。

假设您的浏览器正确实现了该操作，则建议您可能需要处理多个事件，而不是单个事件。

我将确认这绝对是浏览器问题，因为听起来软件/窗口锁定了坐标以使您滚动更流畅的可能性更大。

Answer 2

这是Chrome浏览器中的设计行为，目前没有计划对其进行更改：bugs.chromium.org。

Chrome锁定“车轮​​”事件的方向，以便一旦水平或垂直车轮移动开始，垂直增量就设置为0。

这限制了PC触摸板上使用两指非点击动作（例如，用两根手指在地图上滚动），但是铬没有变化，我看不到前进的路。