The pattern with horizontal scroll is frequently found in mobile versions of sites.
For example, on Airbnb's home page:
It looks smooth and the scroll always stops at the beginning of a card, but there are many bad examples on the Internet when the scroll stops in random positions. I'll not provide links to these sites, but I've created a demo for you, please see it on your phone:
Try to enable and disable CSS Scroll Snap behaviour by toggling the checkbox on top of the page and see a difference when scrolling. The difference is enormous. When CSS scroll snap is enabled, the scroll behaviour is more smooth and looks like a native app.
This behaviour is achieved by 2 simple CSS rules:
.scroll-container {
scroll-snap-type: x mandatory;
}
.scroll-container-child {
scroll-snap-align: start;
}
Cool, right? You can read more about CSS Scroll Snap on mdn.
Browser's support
It has nice browser's support and can be used in production. Can I Use.
That's it
Thank you for reading! Add your reactions and comments.
Follow me on Twitter.
Top comments (2)
This scroll is very nice, I already added to my website for social network part. Usefull, but I searching how scroll horizontaly on desktop, some posts for that but not really correspond to what I would like to achieve. Scroll with the mouse could be awesome!
Your carousel looks cool, I think it can be useful on desktops