Smooth Horizontal Scrolling

In the era of responsive design, often times we will have a series of card-like divs. While we may show them all on desktop, on mobile things tend to be different. What if we want to have an inner container where the user scrolls left and right to view each card? How do we achieve that?

Here's a demo. There are more cards to the right that can be scrolled to.

To make this, we need to create a container that holds our cards. Then we will enable horizontal scrolling on that container.

The overflow-x and overflow-y enable the div to only scroll horizontally. The combination of white-space: nowrap and display: inline-block will neatly line up the cards.

We can also use Flexbox to achieve the same result.

The result is the same. We have all our cards on a single line and they are scrollalble left to right.

On iOS, you want to add -webkit-overflow-scrolling: touch; to your scroll container. By default, Safari will not smoothly scroll these elements.

I wrote a blog post on this topic if you want to learn more.