CSS: How To Create Custom Scrollbar For Webkit Supported Browsers

In this tutorial, we will learn how to create a custom scroll bar using custom CSS styles.

Custom scrollbars are becoming increasingly popular, and I'm excited to learn more about them. A scrollbar can be customised for a variety of reasons. The default scrollbar, for example, can make an app's UI look inconsistent across various versions of windows, thus we can benefit from having a single style here.

This tutorial will help to create a custom scrollbar. Let's see how

One of the most interesting aspects of these scrollbars is that they may be rendered in a variety of styles for different HTML elements on the same webpage.

We will see the implementation of such a scrollbar for Webkit-supported browsers.

First we will look at the basic CSS properties of the scrollbar.

::-webkit-scrollbar             

::-webkit-scrollbar-thumb       

::-webkit-scrollbar-track       

::-webkit-scrollbar-button      

::-webkit-scrollbar-track-piece 

::-webkit-scrollbar-corner      

::-webkit-resizer

The image below depicts the location of these properties within the scrollbar.

Now let’s look at one basic example.

  body{
        min-height: 1000px;
      }
      
    ::-webkit-scrollbar{
        width: 10px;
        margin:5px;
    }
    
    ::-webkit-scrollbar-track{
        background: #fff;
        -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);

    }
    
    ::-webkit-scrollbar-thumb{
        background: #aaa;
        box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
    }
    
    ::-webkit-scrollbar-thumb:hover{
        background: #888;
    }
    
    ::-webkit-scrollbar-thumb:active{
        background: #444;
    }

You can also customize the scrollbars of overflow HTML elements, like this.

<div id="custom-scrollbar">
    <div class="content">
        <!-- some HTML stuff -->
    </div>
</div>

And respective CSS code as,

#custom-scrollbar {
	width: 20%;
	height: 300px;
	overflow: auto;
	background: #eee;
}
    
.content{
 	height: 600px;
}

#custom-scrollbar::-webkit-scrollbar{
	width: 10px;
	margin:5px;
}

#custom-scrollbar::-webkit-scrollbar-track{
	background: #fff;
	-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
	border-radius: 10px;
}

#custom-scrollbar::-webkit-scrollbar-thumb{
	background: #F77;
	box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	border-radius: 10px;
}

#custom-scrollbar::-webkit-scrollbar-thumb:hover{
	background: #A55;
}

#custom-scrollbar::-webkit-scrollbar-thumb:active{
	background: #744;
}

Conclusion 

In this tutorial, you learned how to style scrollbars using CSS and how to make sure that your styles are accepted by most recent browsers.