I have used custom scroll bar on my web applications. I learned a few things when I was trying to use a custom scroll bar using CSS. Here, I will share those things with you.

Let’s start designing the scroll bar…

For Chrome/Safari and other modern browsers:

1. ::-webkit-scrollbar , this pseudo-element is like a container of a scroll bar which is covered by other elements:

::-webkit-scrollbar { width: 9px; }

2. ::-webkit-scrollbar-button , this pseudo-element are used for controlling the directional buttons of the scroll bar:

::-webkit-scrollbar-button { width: 9px; height: 5px; ... }

3. ::-webkit-scrollbar-track , we can style the empty space of a scroll bar using this pseudo-element:

::-webkit-scrollbar-track { background: #ddd; ... }

4. ::-webkit-scrollbar-thumb , by using this pseudo-element we can style the thumb of the scroll bar:

::-webkit-scrollbar-thumb { background: #f1f1f1; width: 8px; ... }

For Firefox:

In firebox we can style scroll bar using CSS property scrollbar-color and scrollbar-width:

:root { overflow-y: scroll; scrollbar-color: #3182fc #ddd; // scroll-thumb and scroll-track scrollbar-width: thin; // thin, auto or custom width }

For learning more you can read:

1. How To Style Scrollbars with CSS
2. Scrollbar
3. The Current State of Styling Scrollbars in CSS