DEV Community

loading...

Improving Horizontal Scroll with CSS Scroll Snap

Paul Golubkov
Senior Frontend Developer. I write about cases from my experience. Subscribe to me on Twitter https://twitter.com/paulcodes_tech
・1 min read

The pattern with horizontal scroll is frequently found in mobile versions of sites.

For example, on Airbnb's home page:

Airbnb's vertical scroll block example

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:

codepen

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;
}
Enter fullscreen mode Exit fullscreen mode

Cool, right? You can read more about CSS Scroll Snap on mdn.

Browser's support

Browser's support table

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.

Discussion (3)

Collapse
thomasbnt profile image
Thomas Bnt • Edited

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!

Preview of scroll horizontaly on small devices at my website

Collapse
fcalderan profile image
Fabrizio Calderan

I wrote an article about it 3 days ago

dev.to/fcalderan/a-css-carousel-wi...

Collapse
paulcodes profile image
Paul Golubkov Author

Your carousel looks cool, I think it can be useful on desktops