CSS Scroll Snapping - Improve Scrolling without JSPublished on 03 Aug 2020
It is an easy way to guarantee that users will scroll to the correct portion of your page or of a container. Picture a landing page that is easily swipable/scrollable between sections, or swipable cards. Take in mind how Android’s Recent Apps screen works, for example:
You can see that Android never allows the end of a scroll to be in a place between cards. There’s a certain threshold that determines that the scroll will snap into the nearest card and put it in the center. All that while still keeping scrolling momentum, allowing you to go from one edge of the list to another in a single scroll if you want to.
I’ve recently added scroll snapping to my own website. You can check it out on the “Work Experience” section in the Home page. It’s specially great on mobile!
There are two main CSS properties that make the magic happen, one for the parent element, and one for its children.
This property tells the browser that the parent element uses scroll snapping. We are given some options on how snapping must work.
y indicates that the scroll happens vertically, while
x means horizontally. We can also pass the
mandatory to tell that the browser must snap to a snap point when the user stops scrolling. This means that if the next snap point becomes visible on the screen and scrolling stops, the browser will automatically snap to the next one. In the other end, with
proximity, things are less strict. The browser will only snap to the next snap point if scrolling gets past a certain threshold. Both values are useful, their use will depend on the situation you’re applying it to.
This is a property you add to the children that specifies where the snap points will be in the element. Which means that, whenever the browser automatically snaps the scroll to the element, it will either go to the left/top edge (
start), center (
center), or right/bottom edge (
end) of the element. This property pretty much only makes a difference if the children are bigger than the parent’s display size.
scroll-padding and scroll-margin
To make things even better, we can use the
scroll-padding (for parent) and
scroll-margin (for children) properties. They add some space before/after the elements that are only considered when scrolling. The best way to implement them is by trying it out after you build your scroll snapping goodiness.
You can check the documentation over on Mozilla Developer Network for more info.
Thanks for reading!