Best way to indicate horizontally scrollable sections to a user?

Question

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:

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!

Answer 1

At first, the idea of horizontal scrolling on mobile devices puts me off. But after a second thought, if done properly, can be a space saver indeed. What I'm getting to is that to many users horizontal scrolling on mobile devices can be counter-intuitive.

Nevertheless if you divide the page in sections and make each section horizontally scrollable individually and independent from the others, it may have sense. This is what I mean by "done properly".

And how to indicate the scrolling possibility? Try to use an overlay with some arrows to show that certain section can be scrolled left or right. See the picture:

You can also play with the shades to indicate whether scrolling has reached either end or simply let the arrow disappear. Just try what's more appealing to you.