Modifying scroll bar of a browser window using CSS

Question

I want to know how I can change the style of the scroll bar of a browser window using CSS. I want to change it's color and width so that I can make the webpage look more attractive and comforting for users. Can I do this with CSS or should I use any other languages to do that?

I would also like to know whether styling scroll bar of a browser window affects page load speed and smoothness since I have seen websites with custom scroll bars which lags while scrolling.

I want to change the following

 1. Width
 2. Color of scroll bar
 3. Color of scroll bar background

Here is a sample page with long enough to display a scroll bar. You may show me how to add the effect on the code below.

Sample structure code below:

HTML:

<html>
<head>
    <title>
        Sample Page
    </title>
</head>
<body>
    <div class="main">

    </div>
</body>
</html>

CSS:

body{
    background:#C0C0C0;
}
.main{
    height:1200px;
    width:1000px;
}

Also try to include the code which works with all browsers like Google Chrome, Firefox and especially IE

CodeRomeos · Accepted Answer · 2015-08-30 09:34:55Z

4

You can design the scroll bar easily with CSS.

body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background:green;
border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
}

for more information you can refer here. : https://www.webkit.org/blog/363/styling-scrollbars/

edited Aug 30, 2015 at 9:34

answered Aug 30, 2015 at 9:22

CodeRomeos

2,4481 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ronald Mathews Over a year ago

Thanks a lot. Cheers.

Ronald Mathews Over a year ago

And what about Mozilla and IE? Any idea?

Ronald Mathews · Accepted Answer · 2015-08-30 10:15:06Z

1

Got it. The CSS for chrome is given above and for IE IS given below

CSS:

body{
   scrollbar-face-color: #EEC800;
   scrollbar-shadow-color: #006cb4;
   scrollbar-highlight-color:#006cb4;
   scrollbar-3dlight-color: #006cb4;
   scrollbar-darkshadow-color: #006cb4;
   scrollbar-track-color: #006cb4;
   scrollbar-arrow-color: #C1C1D1;
}

answered Aug 30, 2015 at 10:15

Ronald Mathews

2,2781 gold badge25 silver badges27 bronze badges

Collectives™ on Stack Overflow

Modifying scroll bar of a browser window using CSS

I want to change the following

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I want to change the following

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related