We are looking to implement code for a mouse wheel event on a div container. The code below functions correctly 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
}
}
However, the MouseWheelEventHandler does not work in Firefox.
According to this reference post with JavaScript, we need to bind the mouse wheel event using DOMMouseScroll. (DOMMouseScroll is deprecated and wheel will be used in the future). While this solution exists for JavaScript, it has not been adapted for Blazor.
document.getElementById("scroll-container").addEventListener("DOMMouseScroll", function(){...}, false);
What is the best way to bind the mouse scroll event for Firefox in Blazor Web Assembly?