跨浏览器：防止在触摸板上缩放，但允许滚动

Question

我希望能够防止 2 指缩放触控板“滚轮”事件，但仍允许 2 指滚动。

我已禁用移动缩放：

<meta
      name="viewport"
      content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover" />

但这至少不会阻止 MacOS Safari 和 Chrome 的缩放。

正如其他一些帖子所建议的那样，在“滚轮”事件上执行preventDefault意味着 2 指滚动停止在触控板上工作。 例如

const ignorePinchToZoomEvent = (event: WheelEvent) => {
  if (event.ctrlKey) {
    event.preventDefault();
  }
}
document.addEventListener("wheel", ignorePinchToZoomEvent, { passive: false });

有没有一种公认的或可以接受的方法来做到这一点？

Answer 1

在 window object 上听 even 解决了这个问题，只有缩放事件才有 ctrlKey 选项。 不确定为什么文档不同。

const ignorePinchToZoomEvent = (event: WheelEvent) => {
  if (event.ctrlKey) {
    event.preventDefault();
  }
}
window.addEventListener("wheel", ignorePinchToZoomEvent, { passive: false });