如何在使用 Firefox 浏览器的 Blazor 中绑定鼠标滚轮事件答案

【问题标题】：How to bind mousewheel event in Blazor working with Firefox Browser如何在使用 Firefox 浏览器的 Blazor 中绑定鼠标滚轮事件
【发布时间】：2026-01-18 11:15:01
【问题描述】：

我们想为 div 容器上的鼠标滚轮事件编写代码。在 Browsers Edge 和 Chrome 中使用以下代码可以正常工作：

<div id="scroll-container" @onmousewheel="MouseWheelEventHandler">
    [...]
</div>

@code 
{
    private async Task MouseWheelEventHandler()
    {
        System.Console.WriteLine("Scroll"); // works in Chrome and Edge, but not in FF
    }
}

但 MouseWheelEventHandler 在 Firefox 中没有触发。

关于这个Post 与JavaScript，我们必须通过DOMMouseScroll 绑定鼠标滚轮。（DOMMouseScroll 已弃用，wheel 将在未来完成这项工作）。这篇文章是 JavaScript 的解决方案，但不是 blazor。

document.getElementById("scroll-container").addEventListener("DOMMouseScroll", function(){...}, false);

如何在 Blazor Web Assembly 中为 FF 绑定鼠标滚动事件？

【问题讨论】：

请参阅this SO 问题。也是一样的原因。
我会在 Eldar 发布的同一个 SO 问题中推荐 this answer。
@Eldar：请阅读我的问题。我的问题不是我已经知道的解决方案的 JavaScript。我的问题针对 blazor 的解决方案。
这能回答你的问题吗？ mousewheel event is not triggering in firefox browser
@Quango：正如您在我的问题中看到的，我已经提到了您发布的链接。

标签： javascript blazor mousewheel blazor-webassembly

【解决方案1】：

对于 Firefox，您必须添加事件 onwheel：

<div id="scroll-container" @onmousewheel="MouseWheelEventHandler" @onwheel="MouseWheelEventHandler">
    [...]
</div>

@code 
{
    private async Task MouseWheelEventHandler()
    {
        System.Console.WriteLine("Scroll");
    }
}

Fiddle

【讨论】：