Click here to Skip to main content
Click here to Skip to main content

Customize Scrollbars using CSS3

, 26 Oct 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
A step by step guide for creating cool scrollbars for website

Introduction

In this tip, 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 browser is that both are supported by Webkit platform. Customization of scrollbar is very easy using CSS3, but Custom Scrollbars are supported by Webkit Browsers. Don't worry, as we know that more than 55% of browser marketplace is covered by webkit platform based browser (i.e., Chrome and Safari) which is also a great thing.

Before going to start, we will see Structure of Scrollbar:

image1

Let's Start

Create HTML Document

 <div class="scrollbar" id="ex3">
    <div class="content">Example 3</div>
</div> 

CSS Stylesheet

Firstly, we set the .scrollbar (class) width, height, background-color. We set overflow-y:scroll for getting vertical scrollbar. Then set .content div height more than .scrollbar so that scrollbar appears (because we used overflow-y property to scroll in .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

image2

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

#ex3::-webkit-scrollbar{
width:16px;
background-color:#cccccc;
} 

Preview

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

In the next step, we are going to give a stylish look to thumb. We use pseudo-element (i.e. scrollbar-thumb) with webkit prefix. Set scrollbar-thumb background- color,border-radius. We also change the color for mouse hovering and active(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;
} 

After that, the Scrollbar looks like this:

Preview

We set border and border-radius of scrollbar-track and use 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 above procedure, I have created some other scrollbars. I am providing the source code of others for downloading.

Preview

That's all. Hope you like it.

Thanks.

My Other Posts (Tip and Tricks)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anoop Kr Sharma
Student
India India
Visit my Blog:www.ittutorialswithexample.com
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Questionnot working with firefox new version PinmemberMember 1122665011-Nov-14 21:44 
QuestionIs it working in all browser? PinprofessionalHardikPatel8910-Jun-14 3:14 
AnswerRe: Is it working in all browser? PinprofessionalAnoop Kr Sharma10-Jun-14 7:12 
GeneralRe: Is it working in all browser? PinprofessionalHardikPatel8910-Jun-14 22:22 
GeneralMy vote of 4 Pinmemberniral bhalodia24-Apr-14 1:18 
GeneralExcellent! PinmemberZurkinden Phlipp25-Mar-14 10:30 
GeneralRe: Excellent! PinprofessionalAnoop Kr Sharma25-Mar-14 18:58 
Questionscroll bar code PinmemberMember 1048988619-Mar-14 2:58 
AnswerRe: scroll bar code PinprofessionalAnoop Kr Sharma19-Mar-14 17:49 
Questionhow to write an onmouseout event with this? PinmemberMember 1046665427-Dec-13 16:46 
QuestionCode not working PinmemberMember 1047226317-Dec-13 5:04 
AnswerRe: Code not working PinprofessionalAnoop Kr Sharma17-Dec-13 5:24 
GeneralRe: Code not working PinmemberMember 1070055526-Mar-14 2:05 
GeneralMy vote of 5 PinprofessionalBrian A Stephens28-Oct-13 8:42 
GeneralRe: My vote of 5 PinprofessionalAnoop Kr Sharma28-Oct-13 17:18 
SuggestionCSS Compatibility PinmemberMehdiNaseri27-Oct-13 20:04 
GeneralRe: CSS Compatibility PinprofessionalAnoop Kr Sharma27-Oct-13 21:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150129.1 | Last Updated 27 Oct 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid