Change browser scrollbar || webkit-scrollbar || CSS scroll

 We can change the scrollbar of  web browser with simple CSS code :


webkit-scrollbar CSS code


There are mainly five parts to customize

1. width

2. Track

3. Handle

4. Handle on hover

5. Button


Lets discuss about all possible components


1. Width of webkit-scrollbar


Its simply the width of the bar. You can adjust it with your design.


<style>

/* width */

::-webkit-scrollbar {

  width: 20px;

}

</style>


2. Track of webkit-scrollbar


Track is the way the bar moves in. Here you can use any color or  gradient.


<style>

/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px grey; 

  border-radius: 10px;

}

</style


3. Handle of webkit-scrollbar


Handle is the object that moves with the scrolling.

you can use any color gradient or image here.


<style>

/* Handle */

::-webkit-scrollbar-thumb {

  background: red; 

  border-radius: 10px;

}

</style>


4. Handle on hover of webkit-scrollbar


Generally its a sign that user have selected the area by showing different effect on hover.

Here we can do just different to inform that they have selected the desired area by hover. We can change the size color or any to inform.


<style>

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000; 

}

</style>


5. Button of webkit-scrollbar


You may have noticed that there are two buttons in scrollbar one is in top and another is in bottom. We also can change it with CSS. You can change the color size and background of this button.


<style>

/* Button */

::-webkit-scrollbar-button {

    height: 20px;

    color: #e30712;

    background-image: -webkit-linear-gradient(

92deg

, #e30712, #02fa13);

    -webkit-animation: hue 7s infinite linear;

}

</style>


All in one CSS eg. 1


<style>

::-webkit-scrollbar {

 width: 20px;

 background-image: -webkit-repeating-linear-gradient(135deg, #eaeaea, #eaeaea 1px, transparent 2px, transparent 2px, #eaeaea, #eaeaea 3px);

  box-shadow: inset 0 0 5px grey;

  

}

::-webkit-scrollbar-thumb {

  background: url(https://1.bp.blogspot.com/-wx4JOlgoo3A/X08J7acSgII/AAAAAAAAYko/OBEKJ_KvWbsHqmTZeMXGNQ6-WhbySYrpACLcBGAsYHQ/s0/repeat-bg.png);

    border-style: outset;

    border-color: #DCDCDC;

     border-width: 4px;

  border-radius: 30px;

 }


::-webkit-scrollbar-thumb:hover {

  box-shadow: inset 0 0 5px grey; 

  border-style: groove;

  border-radius: 50%;

 }

</style> 


All in one CSS eg. 2


<style>

/* width */

::-webkit-scrollbar {

  width: 23px;

}


/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px pink; 

  border-radius: 9px;

}

 

/* Handle */

::-webkit-scrollbar-thumb {

  background: gold; 

  border-radius:  9px;

}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000; 

}

</style>


All in one CSS eg. 3


<style>

/* width */

::-webkit-scrollbar {

 width: 9px;

      

 background-image: -webkit-repeating-linear-gradient(135deg, #eaeaea, #eaeaea 1px, transparent 2px, transparent 2px, #eaeaea, #eaeaea 3px);

  box-shadow: inset 0 0 5px grey;

  

}


/* top-bottom buttons */

 ::-webkit-scrollbar-button{height:20px;

  color:#e30712;

    background-image: -webkit-linear-gradient(92deg, #e30712, #02fa13);

   -webkit-animation: hue 7s infinite linear;}

      

/* Handle */

::-webkit-scrollbar-thumb {

  background: url(https://1.bp.blogspot.com/-wx4JOlgoo3A/X08J7acSgII/AAAAAAAAYko/OBEKJ_KvWbsHqmTZeMXGNQ6-WhbySYrpACLcBGAsYHQ/s0/repeat-bg.png);

    border-style: inset;

    border-color: #DCDCDC;

     border-width: 3px;

  border-radius: 1px;

 

}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

   border-style: outset;

 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.19);

      border-radius: 3px;

 }


</style>  


All in one CSS eg. 4


<style>

/* Width */

::-webkit-scrollbar {

    width: 12px;

}

 

/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

 

/* Handle */

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(255,0,0,0.8); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4); 

}

</style>

Its not necessary to change all components you can change any that your design suits. Its not important to change all to see effect. Just change any that best suits for your site.


Just use the above in your cascading style sheet or directly place it in your HTML code .

Its fun and unique .

You can use any style accordingly with your design.