I’ve already written about the CSS gem
scroll-behavior, a property that allows animating the scroll position change of any HTML element with scroll capability.
This time I needed to achieve a particular micro-interaction in my side-project toy, Presenta, as briefly shown here:
The sidebar allows to select a specific item (the thumb) and the scroll position needs to be changed in order to keep a precise horizontal alignment between the thumb and the editor panel.
An immediate change would not be very user-friendly or even worse it would be highly annoying.
Scroll-Behavior to the rescue
Here the amazingness of CSS. With just one line of it, any scroll position changes will be nicely animated.
It’s jus a matter of modifing the
scrollTop property of the HTML element to make the magic, such as:
document.querySelector('.mydiv').scrollTop = 100
If you have Chrome or Firefox you should see the animation here:
Here a little Vue.js app (you know that I’m a fan of Vue.js?) that shows the meat (click the red thumbs 1):
Have a nice day!
Spotted a typo or (likely) a grammar error? Send a pull request.