Customize Scrollbars Using CSS3

Introduction

In this article, we will learn how to customize scrollbars using CSS3. Today, more than 55% of 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 the 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) which 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 to get 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).

.scrollbar {
    width: 150px;
    height: 300px; /* Fixed height value */
    background-color: lightgray;
    margin-top: 40px;
    margin-left: 40px;
    overflow-y: scroll;
    float: left;
}

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

.content {
    height: 450px;
}

Then, the scrollbar looks like this.

Preview

We set the border and border radius of the scrollbar track and used 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