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!!

Comments

[Tri Ân]

How to change ::-webkit-scrollbar width when hover?

[Anjali Jha]

*the name of the tag/class/id*::-webkit-scrollbar:hover{styles(width)}

This should help, I guess

[Tri Ân]

It really doesn't work

[privatecloudev]

That it is interested

[Aman Chourasia]

Good! 👌

[privatecloudev]

Nice post