Scrollbar is one of element that very often used to navigate the website content. Scroll-bar was also known as a handle in the very first GUI (Graphical User Interface).

Quick Note About Browsers.

When we refer to Webkit-based browsers were essentially talking about Apple Safari and Google Chrome. Together they currently hold more than 40% of the overall desktop browser market. For tablets, Apple’s iPad will always use webkit no matter which company’s browser is used. Google also added Chrome to its Android OS and Chromebooks are of course based on Google Chrome. Looking at these figures there should be a very bright future for scrollbar styling!

Features

It will make your website or blog more stylish and suitable for your template!
It will be more attractive!

Let's Start

Let’s style something, using the -webkit- prefix and webkit’s custom scrollbar properties. Keep in mind that I’m sticking to just the basic CSS properties for ease of understanding

/* Scrollbar learnt from http://www.riteshsonavane.com (Don't remove this it will not appear) (compulsory) */
::-webkit-scrollbar {
 background:#ffffff; /* This changes the background of the scroll bar */
    width: 10px; /* This changes the width of the scroll bar */
} /* This targets the default scrollbar (compulsory) */
::-webkit-scrollbar-thumb {
 background:#02B0E6; /* This changes the scroll box */
 border-top:1px solid #dec470;
 border-bottom:1px solid #dec470;
}
::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* Optional, you can style the top and the bottom buttons (left and right for horizontal bars) */
:-webkit-scrollbar-corner {
      background-color: black;
} /* Optional, If both the vertical and the horizontal bars appear, maybe the right bottom corner also needs to be styled */

Remember

1-5 line is compulsory.
You can change which is coded in yellow.
At Line 3 you can change the color background of scrollbar and if you want you can add image by just replacing the line with
```
background: url(image.png);
```
At line 4 you can change the width of the scrollbar.
At line 7 you can change the color of the scroll box.
At line 12 you can change the color of the buttons!
At line 15 you can change the color of the right bottom corner where vertical and horizontal scrollbar meet.
Point 6 and 7 are optional if you want you can remove them!