Click here to Skip to main content
14,774,304 members
Articles » Web Development » HTML / CSS » CSS
Posted 26 Oct 2013

Tagged as


20 bookmarked

Customize Scrollbars using CSS3

Rate me:
Please Sign up or sign in to vote.
4.89/5 (29 votes)
26 Oct 2013CPOL
A step by step guide for creating cool scrollbars for website


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:


Let's Start

Create HTML Document

 <div class="scrollbar" id="ex3">
    <div class="content">Example 3</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).




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.



Image 3

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).

border:1px solid #333333;
border:1px solid #333333;

After that, the Scrollbar looks like this:


Image 4

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

border:1px gray solid;
-webkit-box-shadow:0 0 6px gray inset;

Final Preview

Image 5

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


Image 6

That's all. Hope you like it.


My Other Posts (Tip and Tricks)


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


About the Author

Anoop Kr Sharma
India India

Comments and Discussions

Bug[My vote of 1] Firefox not Work Pin
Member 122421123-Jan-16 20:17
MemberMember 122421123-Jan-16 20:17 
GeneralRe: [My vote of 1] Firefox not Work Pin
Anoop Kr Sharma4-Jan-16 5:19
professionalAnoop Kr Sharma4-Jan-16 5:19 
Bugsource code is not working Pin
Member 1146312518-Feb-15 20:26
MemberMember 1146312518-Feb-15 20:26 
AnswerRe: source code is not working Pin
Anoop Kr Sharma19-Feb-15 7:40
professionalAnoop Kr Sharma19-Feb-15 7:40 
Questionnot working with firefox new version Pin
Member 1122665011-Nov-14 21:44
MemberMember 1122665011-Nov-14 21:44 
QuestionIs it working in all browser? Pin
HardikPatel.SE10-Jun-14 3:14
professionalHardikPatel.SE10-Jun-14 3:14 
AnswerRe: Is it working in all browser? Pin
Anoop Kr Sharma10-Jun-14 7:12
professionalAnoop Kr Sharma10-Jun-14 7:12 
GeneralRe: Is it working in all browser? Pin
HardikPatel.SE10-Jun-14 22:22
professionalHardikPatel.SE10-Jun-14 22:22 
GeneralMy vote of 4 Pin
niral bhalodia24-Apr-14 1:18
Memberniral bhalodia24-Apr-14 1:18 
GeneralExcellent! Pin
Zurkinden Phlipp25-Mar-14 10:30
MemberZurkinden Phlipp25-Mar-14 10:30 
GeneralRe: Excellent! Pin
Anoop Kr Sharma25-Mar-14 18:58
professionalAnoop Kr Sharma25-Mar-14 18:58 
Questionscroll bar code Pin
Member 1048988619-Mar-14 2:58
MemberMember 1048988619-Mar-14 2:58 
AnswerRe: scroll bar code Pin
Anoop Kr Sharma19-Mar-14 17:49
professionalAnoop Kr Sharma19-Mar-14 17:49 
Questionhow to write an onmouseout event with this? Pin
Member 1046665427-Dec-13 16:46
MemberMember 1046665427-Dec-13 16:46 
QuestionCode not working Pin
Member 1047226317-Dec-13 5:04
MemberMember 1047226317-Dec-13 5:04 
AnswerRe: Code not working Pin
Anoop Kr Sharma17-Dec-13 5:24
professionalAnoop Kr Sharma17-Dec-13 5:24 
GeneralRe: Code not working Pin
Member 1070055526-Mar-14 2:05
MemberMember 1070055526-Mar-14 2:05 
GeneralMy vote of 5 Pin
Brian A Stephens28-Oct-13 8:42
professionalBrian A Stephens28-Oct-13 8:42 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma28-Oct-13 17:18
professionalAnoop Kr Sharma28-Oct-13 17:18 
SuggestionCSS Compatibility Pin
MehdiNaseri27-Oct-13 20:04
professionalMehdiNaseri27-Oct-13 20:04 
GeneralRe: CSS Compatibility Pin
Anoop Kr Sharma27-Oct-13 21:38
professionalAnoop Kr Sharma27-Oct-13 21:38 

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

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