Geek Culture
Published in

Geek Culture

CSS Trick: horizontal scrolling lists on mobile devices

— a really simple example in a React component

Sometimes it is necessary to make a horizontal scrolling effect for a list on mobile devices, which is actually convenient and can be achieved with CSS.

For example, you can represent different categories in a horizontal navigation bar, and each category can be assigned a link that allows user to jump directly to different pages.

Horizontal lists work best when you want to display a subset of homogeneous content that’s part of a heterogeneous set.

The benefit of horizontal scrolling effect is that it makes it easier for website visitors to browse certain content horizontally when using a mobile device, and the page does not appear cumbersome with too much content, such as a lot of lists, etc.

In the following, I will create a simple example to achieve this. ✨

Let’s say we have a fruits list which will be displayed as tags.

mock fruits list

Here’s how we display them in a React component ( or use lists as well <ul><li>… ):

Display the tags within a component

With some basic CSS, we can make each of the list displayed as a tag like this below:

Desktop: fruit tags and title

Actually it looks good enough now, but if you switch to mobile:

The content on mobile is too long which makes page cumbersome

So I decided to change the display of these tags on mobile so that they can be scrolled by user horizontally, I feel like this makes the page look less cumbersome:

Horizontal scrolling lists on Mobile ⬅️ ➡️

To implement this, we can use overflow:scroll on mobile, it will display scrollbars and make the content inside the box scrollable, preventing the content rendering outside the box.

* It’s also possible to customize or hide scrollbars, for example ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner … I will do some introductions at the bottom of this article 👇

Here is the final CSS for tags selector:

overflow: scroll on mobile and flex-wrap on desktop

Now let’s see the result of horizontal scrolling:

Tags have different heights ✴️

Due to the different widths of the content of each tag, we get the result above which doesn’t look good. To solve this problem, we just need a little trick, update tag CSS:

Trick: flex: none

Use flex:none on mobile to “fix” the tags height, and max-width: fit-content on desktop to “fix” the tags width.

That’s it, now we have a scroll bar on mobile and a flex content displayed on desktop. 🍭

👉 Sometimes you may want to hide or customize the scrollbar like I mentioned before, a simple example to achieve these:

Hide example:

-ms-overflow-style: none; // for Internet Explorer, Edge

scrollbar-width: none; // for Firefox

::-webkit-scrollbar {

display:none; // for Chrome, Safari and Opera
}

Customize example:

::-webkit-scrollbar-track{
border-radius: ...;
-webkit-box-shadow: ...;
}
::-webkit-scrollbar-thumb:hover {
background-color: ...;
-webkit-box-shadow: ...;
}

But many UI designers believe that “standardized” UI components like scrollbars should never be interfered with performance, in my opinion you can have complete control. 🧊

Note: ::-webkit-scrollbar only works on Blink and WebKit based browsers (e.g Chrome, Edge, Opera, Safari, all browsers on iOS…), but not Firefox, Internet Explorer, Firefox for Android. If overflow: scroll not set, no scroll bar is displayed.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store