Blazor中如何禁用元素上方的页面滚动？

以下是几个经过验证的解决方案，按优先级排序：

1. 通过JavaScript Interop绑定原生Wheel事件（最可靠） #

Blazor的事件处理有时会存在延迟，导致页面滚动先于Canvas的事件处理触发。直接用原生JS绑定事件可以确保preventDefault和stopPropagation立即生效：

步骤1：创建JS处理文件 #

在wwwroot/scripts下新建canvas-scroll-handler.js：

export function disablePageScrollOnCanvas(canvasElement) {
    const wheelHandler = (e) => {
        // 阻止页面滚动
        e.preventDefault();
        e.stopPropagation();
        // 如果需要将滚轮事件传递给Blazor处理缩放/平移，可在此调用DotNet方法
        // 示例：await DotNet.invokeMethodAsync('YourAssemblyName', 'HandleCanvasWheel', e.deltaY, e.clientX, e.clientY);
    };

    // 必须设置passive: false，否则preventDefault无效
    canvasElement.addEventListener('wheel', wheelHandler, { passive: false });

    // 返回清理函数，用于组件销毁时移除监听
    return () => {
        canvasElement.removeEventListener('wheel', wheelHandler);
    };
}

步骤2：在Blazor组件中调用 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<Canvas @ref="canvasRef" />

@code {
    private Canvas canvasRef;
    private IJSObjectReference? jsModule;
    private Action? cleanupScrollHandler;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/canvas-scroll-handler.js");
            cleanupScrollHandler = await jsModule.InvokeAsync<Action>("disablePageScrollOnCanvas", canvasRef.Element);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        cleanupScrollHandler?.Invoke();
        if (jsModule != null)
        {
            await jsModule.DisposeAsync();
        }
    }

    // 如果需要在Blazor中处理滚轮事件，添加对应的方法
    // [JSInvokable]
    // public static void HandleCanvasWheel(double deltaY, double clientX, double clientY)
    // {
    //     // 你的缩放/平移逻辑
    // }
}

2. 优化Blazor内置事件处理 #

如果不想用JS Interop，尝试调整Blazor事件的配置，确保preventDefault被正确执行：

<Canvas 
    @onwheel="HandleCanvasWheel" 
    @onwheel:preventDefault="true" 
    @onwheel:stopPropagation="true"
    style="touch-action: none;"
/>

@code {
    private void HandleCanvasWheel(WheelEventArgs e)
    {
        // 强制执行阻止默认行为
        e.PreventDefault();
        e.StopPropagation();
        
        // 你的缩放/平移逻辑
        // 示例：Zoom(e.DeltaY); Pan(e.DeltaX, e.DeltaY);
    }
}

注意：部分浏览器对Blazor的@onwheel:preventDefault指令支持存在延迟，这种情况下优先用方案1。

3. 检查Excubo Canvas的内置配置 #

确认Excubo Canvas是否自带了滚轮事件处理，如果有，需要禁用其默认行为。可以查看组件文档，是否有类似DisableDefaultWheelHandling的参数或配置项。

4. 容器层辅助拦截 #

将Canvas包裹在一个容器中，给容器添加事件拦截和样式：

<div 
    style="touch-action: none; overflow: hidden;"
    @onwheel="HandleCanvasWheel"
    @onwheel:preventDefault="true"
>
    <Canvas />
</div>

内容的提问来源于stack exchange，提问作者Birdalicious