custom_scrollbar.txt

Creating a custom scrollbar

Recently, I figured out about customizing scrollbars. Adding custom scrollbars to websites you make, helps enhance it even further and also helps in overall color-coordination.

To start with, we use ::-webkit-scrollbar.It can be included in your CSS section. It's a pseudo element used to modify the look of a browser’s scrollbar. Most browsers other than firefox support this.

A sample example of the code would be-
/* width */
::-webkit-scrollbar {
  width: 10px;
}
This section targets the width of your scrollbar.
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
This relates to the progress bar. Properties such as border radius, box shadow can also be added.
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
It specifies the properties of the scrolling handle that can be dragged.
To design that even further you can try-
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
This will change the color upon hovering.

Similarly some of the other pseudo elements you can use are-
::-webkit-scrollbar-button
the buttons on the scrollbar (arrows pointing upwards and downwards).

::-webkit-scrollbar-track-piece
the track (progress bar) NOT covered by the handle.

::-webkit-scrollbar-corner
the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet
and many more

Hope it helps!!