Cross browser: prevent zoom on touchpad, but allow scroll

Question

I would like to be able to prevent 2 finger zoom on trackpad "wheel" events, but still allow 2 finger scroll.

I have disabled zoom for mobile with:

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

but this does not prevent zoom on MacOS Safari and Chrome at least.

As some other posts suggest, doing a preventDefault on the "wheel" event means 2 finger scroll stops working on the trackpad. e.g.

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

Is there an accepted, or acceptable way to do this?

Answer 1

Listening to the event on the window object resolves this issue, and only zoom events get the ctrlKey option. Not sure why document is different.

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