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.
For example, the scrollbar at Outlook.com's web app portrays a very minimalist style. CSS-Tricks' scrollbar shows their signature orange and pink look.
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.
<div class="container custom-scrollbar">
<h1>Try Scrolling!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit consequatur quae?</p>
<!-- more placeholder text here (omitted for brevity) -->
</div>
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #ecf0f1;
padding: 1.5rem;
margin: 0;
}
.container {
background-color: #fdfdfd;
height: 100%;
width: 100%;
border-radius: 6px;
box-shadow: 0 4px 28px rgba(123,151,158,.25);
border: 1px solid #d6dee1;
padding: 1rem;
overflow: scroll;
}
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:
::-webkit-scrollbar {
width: 20px;
}
Next, let's customize the track, which uses the ::webkit-scrollbar-track selector.
Note: scrollbar selectors are limited, and don't properly support several CSS properties, such as padding, margin, 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).
::-webkit-scrollbar-track {
background-color: transparent;
}
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 ::-webkit-scrollbar-thumb selector.
To begin styling this, I'll add a light-grey background to fit with the general color palette being used:
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
}
Next, let's add rounded corners with the border-radius property, just like we would any other element.
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
}
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.
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
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.
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
The Scrollbar is Done!
Here's the final Codepen:
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
Top comments (10)
This is a really detailed article, thank you for writing it! Another thing I think is worth mentioning along the ability to customize the scrollbar is making sure people can still see it.
Using a good, accessible contrast ratio between the scrollbar's background and thumb helps ensure that people with low vision can still see that the ability to scroll is present.
Looking forward to reading more of your posts!
Great tutorial, I really appreciate it....
further more for Mozilla Firefox add the below given code:
body{
scrollbar-width: thin; /* Can be "auto", "thin", or "none" /
scrollbar-color: #1ed085 transparent; / Thumb and track color */
}
I think you wrote an excellent blog. Thank you for sharing. I am so happy to hear that you have found this excellent blog.
Check your Basic Knowledge of HTML5 MCQs
Really cool trick, this was what I was exactly looking for... Thanks
I know it an old thread but the css is not perfect yet. In the right bottom corner, the scrollbar is giving the parent div sharp corner. How do you fix that though
Thanks, it is a great article to start learning about it but the web scrollbar styling is such a mess they (browsers) should have a seat and talk about it seriously! :)
Very nice!!! 👏👏👏
Great article.. and Is there any way to make the thumb size smaller? answer will help me a lot :) thankyou
Hi,
Great post thanks a lot, Is there a way to hide the scroll when it in not in use or hovered?
Doesn't work on Firefox.