CODEWITHSUNDEEP
javascriptblazormousewheelblazor-webassembly
Simon
Simon

Reputation: 4794

How to bind mousewheel event in Blazor working with Firefox Browser

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?

Upvotes: 1

Views: 1601

Answers (1)

Joachim Marder
Joachim Marder

Reputation: 804

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

Upvotes: 4

Related Questions