Best way to indicate horizontally scrollable sections to a user?

by saricden   Last Updated February 24, 2018 01:16 AM

I'm working on my website and I love the idea of using horizontal scrolling to display large lists of items while saving vertical space.

The problem I'm having is that in the desktop version of Chrome, the horizontal scrolling is made obvious by the horizontal scroll bars (a little ugly, but usable) however on the mobile version of Chrome, scrollbars are only displayed while the user is scrolling, and fade away after they stop which to my eye is a lot less obvious that you can scroll horizontally.

The following two screenshots illustrate my issue:

Horizontal scrolling on mobile

Horizontal scrolling on desktop

As you can see the scrollbars on the desktop version make it very obvious, whereas the only way I think a user could tell the space can be scrolled horizontally on mobile would be by the image that's clipped, but I see two problems with this:

  1. What if the images fill the horizontal space exactly, and you don't see a clipped image?
  2. What if the user just perceives this as a broken mobile experience? Thinking it's just a fixed width area that is overflowing the screen?

Any ideas would be greatly appreciated!

Related Questions

What makes Reverse scrolling a sign of Bad UI?

Updated August 30, 2017 18:16 PM

How to make horizontal scroll obvious?

Updated February 19, 2016 03:07 AM