Description

Work in progress – progress - Scroll containers are currently everywhere. Whether you browse the Appstore, search for articles on Medium or set some filters in Instagram. Many apps use this kind of pattern. But most of them are very touch and mobile oriented. So I wondered how to make it nice on touch AND desktop.

Depending on your desktop layout, you probably don't want the cards to run over the edge of the screen. Let's take a look at the "Home" section of Spotify. On the desktop, they show 4 to 6 cards in a slider with arrows at the top. And with touch/mobile they use the horizontal overflow scrolling.

So let's recreate exactly this behaviour for responsive web use.

Things we want to achieve:

1. Showing 4 slides on desktop with perfect fit. Tease the 4th on touch.
2. Hide arrows on touch
3. Disable corresponding arrow when end or start has been reached
4. Always keep left and right spacings
5. No ugly scrollbars on any browser
6. Horizontal scrolling, dragging or arrow-click
7. Multiple instances
8. CSS Grid and CSS Vars are nice, but let's make this work on IE11 as well