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

pzfprimi 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(181)

我希望能够防止触控板上的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 });

有没有一个被接受的，或可接受的方式来做到这一点？

JavaScript

来源：https://stackoverflow.com/questions/75245378/cross-browser-prevent-zoom-on-touchpad-but-allow-scroll

1条答案

按热度按时间

xriantvc1#

监听窗口对象上的事件解决了这个问题，只有缩放事件才能获得ctrlKey选项。不确定文档为什么不同。

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

赞(0）回复(0）举报 2023-01-29

我来回答

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

1条答案

相关问题

热门标签

最新问答