Custom scrollbars on the web can make a site or design stand out. They can help in portraying key design aspects of a site, whether that be a specific color or a particular style.
In this post, we'll be building a minimalist custom scrollbar, similar to that on the Outlook.com web app.
If you'd like to see the final result, check out the Codepen for this.
1. Setting up the HTML and CSS
We'll start with a basic container element with some placeholder text, which is the element to be scrolled. The design I wrote for this is minimal, with a blue-gray color palette.
This looks something like this:
2. Create the Scrollbar Container and Track
Let's start with the scrollbar container. The scrollbar container encompasses the entire scrollbar, including the track (spans the full height), and the draggable scrollbar thumb.
It is selected via the webkit pseudo selector
::-webkit-scrollbar, which on its own selects all scrollbars on a site. Adding a element as a prefix in the selector allows it to only select the scrollbar in that specific element; ex:
.container::-webkit-scrollbar. This is the same with all other scrollbar properties that we'll use soon.
The scrollbar container is primarily used to customize the width of the entire scrollbar, like this:
Next, let's customize the track, which uses the
Note: scrollbar selectors are limited, and don't properly support several CSS properties, such as
transition, and more. I'll explain a key workaround for one these properties soon.
The track spans the full height of the element that is being scrolled. Styling it typically means changing the its background color. Keeping with the minimalist design, we'll opt to keep the track transparent for now, and only show the scrollbar thumb (the part of the scrollbar which is clicked and dragged by the user).
3. Create the Scrollbar Thumb
Now for the most important part: the scrollbar thumb. As I mentioned, the scrollbar thumb is the main part of the scrollbar which is clicked and dragged by the user. It is selected by the
To begin styling this, I'll add a light-grey background to fit with the general color palette being used:
Next, let's add rounded corners with the
border-radius property, just like we would any other element.
Adding padding to the thumb is tricky, because the scrollbar selectors don't actually support the padding property.
The workaround here is to add a transparent border in place of the padding, and to use the
background-clip: content-box statement to make sure the element includes the border inside its width and height.
Here's what the scrollbar looks like now, almost done:
Fits with the design, right?
4. Add a Hover Effect
Finally, let's add a hover effect to the scrollbar thumb. Unfortunately, the
transition property is not supported in most browsers for scrollbars, so that isn't an option here.
So, instead, let's just make the scrollbar thumb slightly darker when hovered, without any sort of transition.
The Scrollbar is Done!
Here's the final Codepen:<p><iframe height="600" src="https://codepen.io/xtrp/embed/QWjREeo?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;"></iframe></p>
As of writing, custom scrollbars are supported on all major browsers including IE11. See the Can I Use Page for more information on browser support of custom scrollbars.
I hope you liked this post and found it useful in creating a custom scrollbar.
Thanks for scrolling.
— Gabriel Romualdo, May 27, 2020