Today I learned
CSS Scroll Snap
I never was a big fan of Sliders and Carousels. Also, creating them as a front-end developer was always a pain. So whenever possible, I suggested using horizontal scrolling as an alternative.
Combining it with the
CSS scroll-snap properties allows us to create smooth
and precise scrolling experiences, which is super cool.
To get started, you have to look at the two properties, and how they play together to make these scrolling experiences.
The first property is
It defines the type of scrolling behavior for the scroll container. It can be
x, y, or both. The default value is
for example if you set it to
x, the scroll container will snap to snap
positions on its horizontal axis only.
The second property is
It defines the alignment of the snap position relative to the scroll container.
It can be set to
start, center, or end.
If you set it to
start for example, the snap position will be aligned to the
left of the scroll container. So every item you scroll by snaps until its left
edge is aligned with the left edge of the scroll container.
So far, the theory. Now let's look at some examples to showcase the different possibilities for creating these scrolling experiences.
Here is a CodePen with examples of the different scroll snap types and alignments:
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ or via Email ↗.
If you want to support me, you can buy me a coffee. I would be very happy about it!☕️ Buy me a coffee ☕️
I wish you a wonderful day! Marco