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

Originally published here at xtrp.io, a blog about JavaScript, CSS, and just about anything programming.

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.

This post is originally from my blog at xtrp.io.

Fred Adams