I think this is a questionable guideline. The current CSS for scrollbars doesn’t break functionality for e-readers or anything. It can also create an inconsistent experience, which can be a problem for those who rely on a steady interface due to cognitive impairments or vision issues. Nowadays, browsers control their own scrollbars and often apply their own styles. Just open Firefox and Chrome, and you’ll see the difference.
It’s a big if in a sea of probably nots. With accessibility, you’re already catering to a small group, and a tiny fraction of people will be confused by your custom scrollbar. Honestly, it’s rare that someone would struggle with it. I’d prefer having the custom scrollbar I want.
Besides, custom scrollbars weren’t always CSS-supported, and certain concerns might be outdated. Many studies show that visually appealing sites are easier for everyone to use, and adding color and visuals can help with accessibility.
@Brianna
I don’t consider myself disabled, but I already dislike the trend of hover-only scrollbars that are too thin to grab easily with a mouse. Changing colors to worse contrasts is very annoying.
Just like closed captioning, some accessibility measures help everyone.
@CorollaChris4
It’s worth questioning why you want to customize the scrollbar in the first place. Is it really necessary to change it for a small group when most users are fine with the default?
Payne said: @CorollaChris4
It’s worth questioning why you want to customize the scrollbar in the first place. Is it really necessary to change it for a small group when most users are fine with the default?
My portfolio is a progressive web app, so I created the scrollbar to match my branding colors. I didn’t change its size or function, and I still make sure it’s easy to see. It’s just a few lines of CSS. It’s more of a hassle not to customize it.
Is it worth it? Yes, it’s just styling. Why not make things good-looking? I’ve had employers mention it positively, while other applicants didn’t even think about it. The same goes for making my portfolio a PWA and adding a neat manifest with all the right icons.
Is there a reason someone should install my site? Not really. Do many people install it? Not really. But I do it to stand out and make it look polished. I’ve had great feedback. Plus, when I design PWAs for work, custom scrollbars are pretty common.
This desire isn’t discussed (that I’ve seen) in the official scrollbar style guide, which is quite different from ::-webkit-scrollbar. They mention accessibility, but it’s the usual accessibility and contrast advice that applies to text too, and we still allow changing text colors.
Plus, it seems the custom properties shown aren’t reflected in the screenshot. You can see that the track/background isn’t black (#000000).
This desire isn’t brought up in the actual style standard,
MDN isn’t a technical standards document; it’s more like a guide for developers, so it includes more opinions and details not in the original standards that browser creators might rely on.