Styling the scrollbars to suit your webpages will give a pleasant look rather than having the usual scrollbars
For this you need to know about the three components of the scrollbar and write the CSS for those three.
1. scrollbar-thumb, the button on the scrollbar to scroll the page
2. scrollbar-track, which is the place where the thumb moves
3. scrollbar, which is the whole part
Let us have a look at few examples
Consider we are having a scrollbar for the div #content, then
Example – 1
#content::-webkit-scrollbar-track
{
background-color: rgb(230,230,230);
}
#content::-webkit-scrollbar
{
background-color: #FFF;
}
#content::-webkit-scrollbar-thumb
{
background-color: green;
}
Example – 2
#content::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#content::-webkit-scrollbar
{
background-color: #FFF;
}
#content::-webkit-scrollbar-thumb
{
background-color: orange;
}
Example – 3
#content::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#content::-webkit-scrollbar
{
background-color: #FFF;
}
#content::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Play around these three components to style the scrollbar to your requirement
