Surprise: scrollbars are complicated, especially cross-browser and cross-platform.
Sometimes they take up space and sometimes they don’t. Sometimes that is affected by a setting and sometimes it isn’t. Sometimes you can see them and sometimes you can’t unless you’re actually scrolling. Styling them is handled in all sorts of different ways, including some very recent developments.
Follow Zach’s journey toward thinner, native, user-preference-respecting, more aesthetic scrollbars, particularly for element-level scrollbars that ends up here.
Grrr! Scrollbars that are too skinny, and disappear just as you are about to grab them! Apple popularised this retrograde UI design. Disappointing since they have also designed some of the nicest too.
Let’s break apart what is actually happening:
They are the only UI in current use that requires doing the objective (scrolling) via a different input (contorting two fingers on a trackpad first, to make the scrollbar even appear for example), then you race to the edge of the screen to catch the better scrolling method, but the grab handle disappears just as your arrow gets there! As functional as a chocolate teapot.
What is good for a scrollbar?
The last decent scrollbar was probably Mac Systems 6–9 era. They had a ‘grip’ look to them. They were utterly intuitive and easy to handle. They were in the same place as the arm on a one armed bandit. You just pop the coins and stare at the cherries. You don’t need to look for the arm, it’s just there, ready for use.
More contentiously (especially as CSS Tricks has a big blobby colour-branded scrollbar grab handle), the best scrollbars tend to match the overall UI. Admittedly, these were a bit chunky in Netscape days, and sometimes caused an auto horizontal scroll bar to appear, but they were easy to understand.
I’ve always thought it madness that just when our screens got bigger, our scrollbars became pointless waifish, and disappear in time of need.
FYI, choose your favourite!
https://www.buzzfeednews.com/article/jwherrman/20-years-of-the-scroll-bar
Great helpful article!
Btw, the temporary parent element needs “overflow:auto” style too.