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:
Here's a short GIF to demonstrate the behavior:
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…
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 '^^