DEV Community

Cover image for How to Create a Beautiful Custom Scrollbar for Your Site in Plain CSS
Gabe Romualdo
Gabe Romualdo

Posted on • Updated on • Originally published at xtrp.io

How to Create a Beautiful Custom Scrollbar for Your Site in Plain CSS

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.

Default Scrollbar vs. Custom Scrollbar with Examples

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>


Enter fullscreen mode Exit fullscreen mode


* {
  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;
}


Enter fullscreen mode Exit fullscreen mode

This looks something like this:

Step 1 Result

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

Here's what the scrollbar looks like now, almost done:

Step 2 Result

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;
}

Enter fullscreen mode Exit fullscreen mode




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)

Collapse
 
ericwbailey profile image
Eric Bailey

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!

Collapse
 
jalal_khan_021dc1f6c5cd57 profile image
Jalal Khan • Edited

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 */
}

Collapse
 
atharvnishad profile image
Atharv Nishad

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

Collapse
 
shadowx99 profile image
Arefat Hyeredin

Really cool trick, this was what I was exactly looking for... Thanks

Collapse
 
mrsandman101 profile image
A.B.Santhosh

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

Collapse
 
amir2mi profile image
Amir M. Mohamadi

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! :)

Collapse
 
felipeblini profile image
Felipe Blini

Very nice!!! 👏👏👏

Collapse
 
r_mani41 profile image
M4N1

Great article.. and Is there any way to make the thumb size smaller? answer will help me a lot :) thankyou

Collapse
 
tamircodefuel profile image
tamirCodefuel

Hi,
Great post thanks a lot, Is there a way to hide the scroll when it in not in use or hovered?

Collapse
 
eoic profile image
Karolis

Doesn't work on Firefox.