Coloring the browser scrollbars in line with the look and feel of your webpage is a nice touch that we can give. In most of the Laravel web apps that I develop, I do this to color the browser scroll bars to enhance the overall feel of the web app.
Let’s see how we can change the browser’s colors when our website / web application is opened.
Changing browser scrollbar colors
We can change the colors of the browser’s scrollbars by using the following 3 pseudo-elements:
- ::-webkit-scrollbar
- ::-webkit-scrollbar-track
- ::-webkit-scrollbar-thumb
The above 3 pseudo-elements represent the vertical scrollbar of the browser, the track of the scrollbar, and the small tab that moves on the track when we scroll, respectively.
Let’s see how we can actually use them in CSS to change the colors of our browser scrollbar.
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #3c4fb8;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #415FFF;
}This simple bit of CSS code above will change the color of the browser’s scrollbar to any valid color that you use.
**Please note that the -webkit-scrollbar-* elements are not standard. So, the performance might not be consistent on all browsers.
