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 on

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

Collapse
 
anjalijha22 profile image
Anjali Jha Author • Edited on
*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
 
aheisleycook profile image
privatecloudev

Nice post

Collapse
 
amanchourasia profile image
Aman Chourasia

Good! πŸ‘Œ

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.