Hey, before scrolling, I've made a tool to help people building presentations the modern way.
If you don't mind, I'd like to ask some feedback about it. Here the starting point to learn more.
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.