Have you ever noticed just how ugly the scrollbar can be on a PC? For the most part, I think we are pretty much acclimated to it, but then there are select cases where it just sticks out like a sore thumb.
Have you ever coded a custom dropdown? Yeah, does not look good.
What about a nav bucket? That doesn’t look good there either.
If you’re a Mac or Linux user, you are probably laughing right now with your sleek scrollbars.
As it turns out, you can style the scrollbar! Let’s check it out!
Webkit Properties
The two main pseudo-selectors that are going to do the bulk of the heavy lifting are ::-webkit-scrollbar and ::-webkit-scrollbar-thumb.
div::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
div::-webkit-scrollbar-thumb {
background: #666;
}
::-webkit-scrollbar is the pseudo-selector that is going to handle the sizing of the scrollbar, or track. You use the width and height properties to size the scrollbar to your exact specifications. The little confusing part is you only adjust the width of the scrollbar. The width property controls the width of the vertical bar, and the height property controls the width of the horizontal bar.
You can also play around with other properties to use with this pseudo-selector. For example, background-color.
::-webkit-scrollbar-thumb is what controls the thumb of the bar that shows where you are on the page. You don’t do anything with width or height with this one; instead, you control the color or look of it. You can change the background-color to be something that matches your site better, and even mess around with the border-radius for a more rounded thumb.
Browser Support
As you might’ve already guessed from the -webkit- prefix, this is only supported in browsers that actually use -webkit- (chrome, safari, etc).
According to CanIUse, the prefixed support for this is sitting right around 86%, and that’s okay, because this is a progressive enhancement. Nothing is going to break if the browser doesn’t support these styles, as the user will still see a scrollbar…it’ll just be ugly.
I’d say 86% is a good enough number to implement, especially since there are no downsides.
Firefox
Ah, so you noticed that nearly 3% that showed unprefixed support? You get a cookie.
Firefox as of version 64 and beyond, is officially supporting scrollbar styling. The downside to this is it’s completely different than the -webkit- selectors, which is a bit of a bummer. So that means we get to learn about some more selectors!
/* Keyword values */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;
/* values */
scrollbar-width: 1em; /* A valid length */
/* Global values */
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: unset;
scrollbar-width is the equivalent to our -webkit-scrollbar, but with some interesting values to go with it. You can choose from some various predefined options, such as auto, thin, none, inherit, initial, and unset, or you can specify a valid width.
Unlike the -webkit- counterpart, you don’t have to worry about a width and height, this one property takes care of both vertical and horizontal bars.
/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;
/* values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */
/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;
scrollbar-color is the equivalent to our -webkit-scrollbar-thumb. Once again, we get some default values: auto, dark, light, inherit, initial, and unset. Of course, you can also specify a named color, hex, or rgb(), whichever you prefer.
If you are looking to style the track as well, you add in a second value to this property. So the first value is for the thumb, and second value is for the track. Neat.
Odd Man Out
You can probably guess the odd one out, right?
Yup, IE and Edge.
According to the CanIUse data, there is nothing showing that they are going to implement something soon. If they do, hopefully they follow in Firefox’s footsteps so we don’t have to memorize another set of properties.
Or maybe with Edge planning a switch to Chromium…
Mac and Linux
There has to be a bit of a downside, right? Whether this is a downside is up to you to decide.
The styling that you do to make PC scrollbars not look terrible, also effects Mac and Linux users. That means, if you love how these two OS’ use scrollbars, you might be messing it up a bit.
Never to fear, there is a way, it just requires a platform check, which means some JS. Most of us are using Modernizr anyway, so this simple check isn’t really a deal breaker.
if(window.navigator.platform.indexOf('Win') > -1) {
document.documentElement.classList.add('beautify-scrollbars');
}
A simple check to see if the user is on a Windows PC sets us in the right direction. If the function returns truthy, then we can just add a class to the <html> that lets our CSS know we can style the scrollbar.
Simple and effective.
Wrapping Up
See the Pen Scrollbar Styling by Kyle Hawk (@Krazyhawk) on CodePen.
It may of been common sense to some, but this really was a cool discovery for me! I was working on this site and just hated the way the scrollbar looked on the coding snippets when it had a horizontal bar.
Sure, it’s still going to look bad on IE, Edge, and <64 Firefox, but that’s why it’s a progressive enhancement. The functionality is still all there. Just looks a little prettier. If you have any questions or need help, just shoot me an email. I’ll be glad to assist. Thanks for reading about scrollbars with me.