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 scroll-snap-type ↗ Opens in new tab. It defines the type of scrolling behavior for the scroll container. It can be set to x, y, or both. The default value is none.

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 scroll-snap-align ↗ Opens in new tab. 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:

It's awesome see that we are able to create these scrolling experiences with CSS only and without any JavaScript.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ Opens in new tab or via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco