Improving Horizontal Scroll with CSS Scroll Snap

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.