当光标悬停在 Blazor 元素上时防止页面滚动

Question

在 Blazor 中，我有一个使用 Excubo Canvas 制作的具有平移/缩放功能的画布，但是如果页面有足够的内容使页面可滚动，则在画布上滚动以缩小也会向下滚动页面。

我正在使用

@onwheel

事件来实现画布上的滚动操作。我尝试添加

@onwheel:preventDefault

、

@onwheel:stopPropagation

，并对

@onscroll

进行同样的操作，并且滚动仍然存在。我还尝试设置 css touch-action: none 。一切仍然滚动。

如何禁用元素上的任何滚动？

Answer 1

带有

onwheel

的 PreventDefault 不起作用。这是一个已知问题。

您可以使用 js 事件处理来实现：

 <canvas onwheel=" event.preventDefault()"></canvas>

工作解决方案在这里。