DEV Community

Cover image for Creating a custom scrollbar
Anjali Jha
Anjali Jha

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

This section targets the width of your scrollbar.

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
Enter fullscreen mode Exit fullscreen mode

This relates to the progress bar. Properties such as border radius, box shadow can also be added.

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

End

Top comments (6)

Collapse
 
ngtrian profile image
Tri Ân • Edited

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

Collapse
 
anjalijha22 profile image
Anjali Jha • Edited
*the name of the tag/class/id*::-webkit-scrollbar:hover{styles(width)}
Enter fullscreen mode Exit fullscreen mode

This should help, I guess

Collapse
 
ngtrian profile image
Tri Ân

It really doesn't work

Thread Thread
 
aheisleycook profile image
privatecloudev

That it is interested

Collapse
 
amanchourasia profile image
Aman Chourasia

Good! 👌

Collapse
 
aheisleycook profile image
privatecloudev

Nice post