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
 
Structure of Scrollbar
 
Let's Begin
 
The following will create the HTML Document:
  1. <div class="scrollbar"id="ex3">  
  2.     <div class="content">Example 3</div>  
  3. </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).
  1. .scrollbar {  
  2.     width150px;  
  3.     height300px;  
  4.     background-color: lightgray;  
  5.     margin-top40px;  
  6.     margin-left40px;  
  7.     overflow-y: scroll;  
  8.     floatleft;  
  9. }  
  10.   
  11. .content {  
  12.     height450px;  

Preview
 
Vertical Scrollbar
 
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.
  1. #ex3::-webkit-scrollbar{  
  2.     width:16px;  
  3.     background-color:#cccccc;  
Preview
 
Custom Scrollbar
 
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).
  1. .scrollbar {  
  2.     width150px;  
  3.     height:300#ex3::-webkit-scrollbar-thumb {  
  4.         background-color#B03C3F;  
  5.         border-radius: 10px;  
  6.     }  
  7.     #ex3::-webkit-scrollbar-thumb:hover {  
  8.         background-color#BF4649;  
  9.         border1px solid #333333;  
  10.     }  
  11.     #ex3::-webkit-scrollbar-thumb:active {  
  12.         background-color#A6393D;  
  13.         border1px solid #333333;  
  14.     }  
  15.     x;  
  16.     background-color:lightgray;  
  17.     margin-top:40px;  
  18.     margin-left:40px;  
  19.     overflow-y:scroll;  
  20.     float:left;  
  21. }  
  22.   
  23. .content {  
  24.     height450px;  

Then, the scrollbar looks like this:
 
Preview
 
Scrollbar in CSS
 
We set the border and border-radius of the scrollbar-track and use a box-shadow to make it stylish.
  1. #ex3::-webkit-scrollbar-track{  
  2.     border:1px gray solid;  
  3.     border-radius:10px;  
  4.     -webkit-box-shadow:0 0 6px gray inset;  

Final Preview
 
Border-and-border-radius-of-scrollbar.jpg
 
Using the preceding procedure, I have created some other scrollbars. I am providing the source code of others for downloading.
 
Preview
 
created Scrollbars


Similar Articles