How to disable page pinch-to-zoom trackpad gesture or Ctrl + wheel over an element?

Question

Look at the example here - https://openseadragon.github.io/examples/tilesource-dzi/

When you ctrl + scroll on the zoomable image. Image zoom works but the page do not scale. Outside of the image, the entire page zooms.

I am trying to achieve the same functionality on my Next.js page, tried adding preventDefault on the wheel event but it does not work.

How to achieve the desired behavior?

Answer 1

On edge, it worked by preventing the gesture event - https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event

On further investigation, I found that using onWheel on JSX element produces React's synthetic event. Instead when I use object ref and add wheel event like ref.current.addEventListener('wheel', (e)=>{e.preventDefault(); e.stopPropagation()}, it worked.

Answer 2

I found this snippet for vanila js project:

const image = document.getElementById("your-image-element");

image.addEventListener("wheel", function(event) {
  event.preventDefault();
  let zoom = 1;
  if (event.deltaY < 0) {
    zoom += 0.1;
  } else {
    zoom -= 0.1;
  }
  image.style.transform = `scale(${zoom})`;
});

You can use CSS to change the transform property of the image to achieve the zoom effect. You can also use the preventDefault() method to prevent the default behavior of the mouse wheel event, which is to scroll the page. To only zoom the image and not the whole page, you need to update the CSS transform property of the image element only.