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?
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.