How to add custom scrollbar in CSS?
Habibullah Bahar
May 09, 2022
I have used custom scroll bar on my web appli
cations. 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: