How to bind mousewheel event in Blazor working with Firefox Browser

Question

We want to write code for an mousewheel-event on an div-container. Using the following code works fine in Browsers Edge and 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
    }
}

But the MouseWheelEventHandler is not firing in Firefox.

Regarding this Post with JavaScript we had to bind the mousewheel by DOMMouseScroll . ( DOMMouseScroll is deprecated and wheel would do the job in future). This post is a solution for JavaScript, but not blazor.

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

How can I bind the mouse-scroll event for FF in Blazor Web Assembly?

Answer 1

For firefox you have to add the event onwheel:

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

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

Fiddle