Mobile side scrolling: On some screen sizes, the gap between elements land right at the right edge, so it looks like there isn't any scrolling

Question

I have the elements going off the right edge of the screen to show it's horizontal scrolling.

Issue is at some screen sizes, the gap between elements lands right at the right edge, so it looks like there isn't any scrolling.

We've thought of the following solutions:

1. animation on page load (issue with this is it can slow down page load, look glitchy, and add extra level of effort to the project)
2. gradient on the right edge (not a fan of how this looks)

My question is, are there other design solutions? Are there code solutions - like forcing the padding to change so the last element is always peeking in? I feel like there has to be, because how do apps solve this?

Would prefer a simple solution that would work well on a website, not an app.

Thanks!

Answer 1

The common way is to use the arrows or chevrons to indicate that the container can be scrolled left/right. If that method is not in consideration, then I suppose, you could use some CSS calc() function to determine the best card size using screen viewport width along with the number of cards in your scroll view.

Answer 2

Fade

Example

Can't seem to upload the image.. click the link!

Answer 3

Many applications build nowadays have a horizontal scroll. Users are used to horizontal scroll, no need to worry about it.

In case your targeted audience not that smart like adults. Make use of screen width value and set tabs width accordingly so that one tab will appear of its half-width.

here is the code done using viewport width(VW) unit.

https://jsbin.com/soxudaticu/edit?html,css,output