Best way to indicate horizontally scrollable sections to a user?
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:
- What if the images fill the horizontal space exactly, and you don't see a clipped image?
- 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!