如何禁用页面捏合缩放触控板手势或 Ctrl + 在元素上滚动？

Question

看看这里的例子 - https://openseadragon.github.io/examples/tilesource-dzi/

当您 ctrl + 在可缩放图像上滚动时。 图像缩放有效，但页面不缩放。 在图像之外，整个页面都会缩放。

我试图在我的 Next.js 页面上实现相同的功能，尝试在 wheel 事件上添加 preventDefault 但它不起作用。

如何实现期望的行为？

Answer 1

我为 vanila js 项目找到了这个片段：

const image = document.getElementById("你的图像元素");

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})`;
});

可以使用CSS改变图片的transform属性来实现缩放效果。 您还可以使用 preventDefault() 方法来阻止鼠标滚轮事件的默认行为，即滚动页面。 要仅缩放图像而不缩放整个页面，您只需更新图像元素的 CSS 转换属性。

Answer 2

在边缘，它通过阻止手势事件来工作 - https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event

在进一步调查中，我发现在 JSX 元素上使用 onWheel 会产生 React 的合成事件。 相反，当我使用 object ref 并添加像ref.current.addEventListener('wheel', (e)=>{e.preventDefault(); e.stopPropagation()}这样的轮子事件时，它起作用了。