How to add custom scrollbar in CSS?

Habibullah Bahar Piash
2 min readFeb 16, 2022

--

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

--

--

Habibullah Bahar Piash

Web Design & Development is my passion! I love to learn and explore new tech things.