“Cancelable” Smooth Scrolling
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.
I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works.
Scroll down on this demo and give it a shot:
Here’s what I experienced on the browsers I have easy access to:
| CSS Smooth Scroll | JavaScript Smooth Scroll | |
|---|---|---|
| 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:
- make smooth scroll actions triggered either through CSS or JavaScript cancellable.
- 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).
- make Safari have it. Smooth scrolling makes things like carousels without JavaScript very practical, and that’s great, particularly on mobile where iOS Safari is forced on Apple devices.
The post “Cancelable” Smooth Scrolling appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
