I’m developing an online application that relies on a specific zooming feature, as part of its functionality.
Some devices – like laptops – use a touchpad, where you can both scroll and pinch to zoom using just two fingers.
Since this was a zooming-based web app, I needed to disable the user gesture of pinching to zoom into the actual content of the page.
What I’ve Tried Already
After doing a lot of research, I finally found an answer that would prevent users from pinch-zooming. (Shown below)
JavaScript
window.addEventListener('wheel', e => {
e.preventDefault()
}, {passive: false})
The Problem
This approach works well. However, the current issue is that – although this code does indeed disable pinch-zooming on a touchpad – it also disables standard vertical scrolling when using two fingers. As a result, for devices with touchpads major parts of my application are completely hidden from view / inaccessible.
I need a JavaScript solution that disables pinch-zooming but preserves vertical scrolling functionality on touchpads.
Please note: I am aware that it is generally discouraged to disable pinch-zoom on a webpage, but it is necessary for this application, as explained before.
Thanks