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

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?

CodePudding user response：

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.

CodePudding user response：

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