CSS Scroll Behavior
Posted on September 11, 2017 in
2 min read
Last day I've been notified by Google Chrome about its version update (61.x). I've quickly checked the release notes discovering the introduction of the CSS property
scroll-behavior, a property I didn't know about.
I've got interested and I've conducted a quick search about it.
It's a neat property that allows to smoothly animate the scroll position in a scollable box, instead of a straight jump, when using anchor links to target different position of the viewport.
Adding transitions to state changes is not a cosmetic feature. The ability to let the user know what's going on in front of her after an action is key in usability realm.
scroll-behavior property is not going to impress anyone.
What is amazing here (that is typically of the CSS in general) is the simplicity as well as the backward compatibility about adding this behavior.
We don't have to reinvent the wheel with some library to incorporate a smooth scrolling behavior in our scollable panel, not anymore. And we don't have to worry about backward compatibility. If a browser doesn't support it, it will be ignored, making the page working without transition.
So far, it's compatible with the latest version of Chrome (61.x) and Firefox (55.x). Here a quick sketch that works on every browsers, with or without animation according to browser compatility.
Feel free to click on the header sections, the next/prev and don't forget to try the last section as well:
See the Pen CSS Scroll Behavior by Fabio Franchino (@abusedmedia) on CodePen.
Tip: if you set the scrollable wrapper both with
scroll-behavior:smooth; you'll get and interesting effect. The user scroll is disabled (and so the scrollbars are hidden) but the behavior is still working as expected using the anchor links, even in browsers that don't support