How to add custom scrollbar in CSS?

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

My portfolio website: https://habibullahftl.web.app