How to recreate GitHub’s scrollable collections
It’s been a while since GitHub updated the look and feel of its Explore page. At first I wasn’t sure what to make of the horizontally scrollable sections of trending repositories, topics, and apps that were available on the page. At first I thought that it’d be nicer to use on a phone or tablet, but over time I’ve grown to like it on the desktop as well. I like how the scrollbar fades into the background on either side, and I like how everything is aligned. That’s why I wanted to try and recreate it in a flexible way using CSS variables.
The HTML and CSS that I ended up writing is slightly different than the way GitHub implemented theirs. It consists of an outer element that uses :before and :after pseudo elements positioned at both ends that use a gradient for their background. And that element has a child element that acts as the scrollable container for all the cards/items. It makes use of negative margins in order to hide the thumbs of the scrollbar. There’s also some bonus styling added to support the CSS transform scaling that occurs whenever you hover over an interactive card. You can view the complete demo below.
There are other browser-specific ways of styling scrollbars in CSS, but they don’t work on every browser. Some people create custom scrollbars using JS. I like seeing all the creative ways that people come up with to style the web.
I’ve often read that horizontal scrolling should be avoided because it’s not used often and provides a bad user experience. However, new devices and ways of interacting with those devices have challenged a lot of old standards and guidance. The ways in which we interact with and consume information continues to evolve and grow, providing improved experiences, and so I think it’s important to regularly challenge those old assumptions.
