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:
CodePen - CSS Scroll Snap Opens in new tabIt'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 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!
☕️ Buy me a coffee ☕️I wish you a wonderful day! Marco