javascriptfirefoxautoscrollpanning

Hiding Firefox's autoscroll indicator


I'm implementing a classic "pan & zoom" UI using CSS transforms and mouse events.

I want to implement panning by holding down the mouse wheel button and moving around.

Unfortunately, on Firefox, holding down the mouse wheel button shows this "autoscroll" indicator:

Firefox's autoscroll indicator

Here's a short GIF to demonstrate the behavior:

a GIF showing a pan-and-zoom interaction, with the Firefox autoscroll indicator showing up on every mouse down event, and remaining at the same position until a mouse up event occurs

I tried using preventDefault, but calling it prevents any mouse movement. calling it on the mousedown event alone does not prevent it from showing up.

I also tried the

window.scrollTo(window.scrollX, window.scrollY)

trick from this answer to the seemingly only related SO question

Web apps like Figma are able to do it, is it that they somehow re-implement a complete "mouse engine" and thus preventDefault everything?

Obviously, any about:config-based solution, like you can find on the Internet, is not relevant here…


Solution

  • Okay so, I forgot that destructuring preventDefault from an Event object gives an unusable function (since it's not bound to the event object's this anymore)

    Calling preventDefault on the mousedown event does work, woops '^^