Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse wheel,, trackpad, or whatever. That’s what I mean by cancellable. Without any further action, the scroll event goes to the destination. Cancellable means you can stop it with a subsequent scroll. I find the cancellable behavior better UX, although I have no data to back that up.
Scroll down on this demo and give it a shot:
Here’s what I experienced on the browsers I have easy access to:
|Chrome||Cancellable (Speed: Slowish)||Not Cancellable|
|Firefox||Cancellable (Speed: Very Fast!)||Cancellable (Speed: Fast!)|
|Safari||No Smooth Scrolling||No Smooth Scrolling|
|Edge||Cancellable (Speed: Fast)||Not Cancellable|
|iOS||No Smooth Scrolling||No Smooth Scrolling|
If it was up to me, I’d:
- define “cancellable” because it isn’t really the right word. Maybe “interrupted”? Or “controlled”? Ideas welcome!
- make the speed controllable, or if not, attempt to get browsers to agree on a medium-ish speed (that stays consistent regardless of scroll distance).
You can support CSS-Tricks by being an MVP Supporter.