Style yours scrollbars with native CSS and no need to integrate bulky JavaScript libraries!
In the past, if you wanted to style a scrollbar on your website you’d probably spend half a day Googling for and trying out JavaScript libraries, installing them on your site, and figuring out how to apply them to your site’s elements. Thankfully, there are now pure-CSS options to style your scrollbars!
Now, we’re still in this capability’s infancy, so there are limitations and cross-browser differences. So if you need total control over your scrollbars and you need it to be iron-clad, 100%, cross-browser identical, then you will probably still need to rely on some sort of JavaScript library to help you out. But, if you just want to make those clunky, out-of-the-box, web browser scrollbars look a little nicer, adding just a few lines of CSS should be a fantastic option for you!
So let’s discuss what’s available for us:
::-webkit-scrollbar
Available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others… ie. almost everything except Firefox)
For most web browsers, you can actually define quite a range of elements related to the scrollbar using the following pseudo-elements:
- ::-webkit-scrollbar — the entire scrollbar.
- ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
- ::-webkit-scrollbar-thumb — the draggable scrolling handle.
- ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
- ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
- ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
- ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.
Most commonly, you’ll want to define a height (used for horizontal scrollbars), width (used for vertical scrollbars), and background color on the ::-webkit-scrollbar pseud-element, as well as a background color on the ::-webkit-scrollbar-thumb pseudo-element like this:
/* Adjust scrollbar width and background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar {
height: 8px;
width: 8px;
background-color: #ddd;
border-radius: 8px;
}
/* Adjust scrollbar thumb background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar-thumb {
background-color: #f1662a;
border-radius: 8px;
}In this example, we added a little flair by also rounding our scrollbar elements with border-radius.
scrollbar-width and scrollbar-color
Available in Firefox and Firefox for Android
Unfortunately, Firefox doesn’t recognize the ::-webkit-scrollbar pseudo-elements, but while it is a bit more limited (sorry, no fancy rounder scrollbars), Firefox does have its own scrollbar-width and scrollbar-color properties you can define instead:
/* Adjust scrollbar width and color in Firefox */
.scrollbar-container {
scrollbar-width: thin; /* Accepts auto, thin, and none values */
scrollbar-color: #f1662a #ddd; /* Takes two color values, first for the track and second for the thumb */
}Bring it all together!
Below is an example of applying both sets of styles. Take a look in a couple different browsers and see how well we’re covered!
<style>
/* Adjust scrollbar width and color in Firefox */
.scrollbar-container {
scrollbar-width: thin; /* Accepts auto, thin, and none values */
scrollbar-color: #f1662a #ddd; /* Takes two color values, first for the track and second for the thumb */
}
/* Adjust scrollbar width and background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar {
height: 8px;
width: 8px;
background-color: #ddd;
border-radius: 8px;
}
/* Adjust scrollbar thumb background color in non-Firefox browsers */
.scrollbar-container::-webkit-scrollbar-thumb {
background-color: #f1662a;
border-radius: 8px;
}
.scrollbar-container {
height: 100%;
overflow: auto;
font-family: sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 1em;
}
</style>
<div class='scrollbar-container'>
<h4>Orange Scrollbar Example</h4>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.</p>
<p>Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices.</p>
<p>Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.</p>
<p>Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
<p>Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis velit pretium ut. Nunc consequat efficitur ultrices.</p>
<p>Nullam hendrerit posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis. Aliquam at enim ligula.</p>
</div>Give it a try! And as always, let us know if you have any questions!
