We can change the scrollbar of web browser with simple 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGFHjn26UEEJkBtMYMY7Eqh12-B2SJ-MdOj84qgWBlIHB-M-0wZBl9VL9FwE3R-96U0OP9lLZvz0u_pSWwHWci8Yyc7YuV24X8W4jWfysmh0eNCkhc7nMc8NIYWWus7LlPJUR16jYDXg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGFHjn26UEEJkBtMYMY7Eqh12-B2SJ-MdOj84qgWBlIHB-M-0wZBl9VL9FwE3R-96U0OP9lLZvz0u_pSWwHWci8Yyc7YuV24X8W4jWfysmh0eNCkhc7nMc8NIYWWus7LlPJUR16jYDXg/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.