Customize Scrollbars Using CSS3

In this article, we will learn how to customize scrollbars using CSS3. Today, more than 55% people use Chrome + Safari as their Web Browser. The common thing in these browsers is that both are supported by the Webkit platform. Customization of scrollbar is very easy using CSS3, but Custom Scrollbars are supported by Webkit Browsers.

Don't worry, since as we know, more than 55% of the browser marketplace is covered by Webkit platform-based browsers (such as Chrome and Safari) that is also a great thing.

 

Before beginning, we will see the structure of a Scrollbar:
 

 

Let's Begin
 

The following will create the HTML Document:
 

<div class="scrollbar"id="ex3">

    <div class="content">Example 3</div>

</div>

CSS StyleSheet 

First, we set the .scrollbar (class) width, height and, background-color. We set overflow-y:scroll for getting the vertical scrollbar. Then set the .content div height more than the .scrollbar so that the scrollbar appears (because we used the overflow-y property to scroll in the .scrollbar class).
 

.scrollbar{

width:150px;

height:300px;

background-color:lightgray;

margin-top:40px;

margin-left:40px;

overflow-y:scroll;

float:left;

}

.content{

height:450px;

}

Preview

 

Then, we use the scrollbar pseudo-element for creating the custom scrollbar. When we use the scrollbar pseudo-element, it will turn off its default scrollbar and a scrollbar is shown with a 16px width and background-color:#cccccc.

 

#ex3::-webkit-scrollbar{

width:16px;

background-color:#cccccc;

}
 

Preview

 

As we know, a Scrollbar contains a Track, Button and Thumb.
 

In the next step, we will give a stylish look to the thumb. We use a pseudo-element (in other words scrollbar-thumb) with the "webkit" prefix. Set the scrollbar-thumb background-color and border-radius. We also change the color for the mouse hovering and activation (on clicking).

 

#ex3::-webkit-scrollbar-thumb{

background-color:#B03C3F;

border-radius:10px;

}

#ex3::-webkit-scrollbar-thumb:hover{

background-color:#BF4649;

border:1px solid #333333;

}

#ex3::-webkit-scrollbar-thumb:active{

background-color:#A6393D;

border:1px solid #333333;

}

 

Then, the scrollbar looks like this:
 

Preview

We set the border and border-radius of the scrollbar-track and use a box-shadow to make it stylish.
 

#ex3::-webkit-scrollbar-track{

border:1px gray solid;

border-radius:10px;

-webkit-box-shadow:0 0 6px gray inset;

}
 

Final Preview
 

 

Using the preceding procedure, I have created some other scrollbars. I am providing the source code of others for downloading.

Preview