# Custom ScrollBar with Pure CSS

I'll demonstrate how to make custom scrollbars for your website using only CSS. I'll go over every potential problem you might run into and how to fix it.

# **Scrollbar Components**

We must first understand the various components of a scrollbar because each component must be styled separately.

A web page's scrollbar consists of several elements.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676838717319/cff7b908-688b-46fb-96de-b6644a7f2801.png align="center")

Scrollbar Track, Scrollbar Thumb, Arrow Buttons (Up and down/Left and right).

The `thumb` is the portion that we can move and show us the position where we are on a page.

The `track` is the portion behind the thumb that works as a background for the thumb. We move the thumb inside the track.

In this article, we will customize each of these elements. Let's Consider this Demo Page for that 👇

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676877882531/408570bc-c959-4cdc-a44a-4821dd2f6fc2.png align="center")

# **Custom Scrollbars in Chrome, Edge & other Chromium Browsers**

First, let’s see how can you customize your scrollbar in browsers other than Firefox.

To style the scrollbar, add the following code to your stylesheet.

```css
::-webkit-scrollbar {
	width: 0.7vw;
}

::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
	background-color: #6e78ff;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #6d75e8;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676879672674/e2c4ba06-c92b-411f-afe9-22f6ca14a344.gif align="center")

Here, I have used 3 pseudo-elements

* `::-webkit-scrollbar` - Affects the entire scrollbar.
    
* `::-webkit-scrollbar-thumb` - Affects the draggable scrolling handle.
    
* `::-webkit-scrollbar-track` - Affects the space where we move the thumb.
    

The problem is that all CSS properties don't work inside `::-webkit-scrollbar` element.

For instance, I have used `border-radius` property in `::-webkit-scrollbar-track` because `border-radius` property does not work inside `::-webkit-scrollbar` element.

> **📝 Note:** Here, `margin-top` and `margin-bottom` properties inside `::-webkit-scrollbar-track` will only work for vertical scrollbars. The `width` property only works for vertical scrollbars.

I have used **viewport width** `vw` units because if you use **pixel** `px` unit here then when you zoom in or out on a web page, the size of the scrollbar will change.

To avoid changing in size when users zoom in or out of my website, I want a fixed-size scrollbar on the page.

## **Customize Arrow Buttons in Scrollbars**

You'll notice there are no arrow buttons when you add the above code to your stylesheet. If you prefer not to use those buttons, the first example will work just fine.

But, you can use the code provided below if you want to add arrow buttons to your customized scrollbars.

```css
::-webkit-scrollbar-button:single-button {
	background-color: #ece4e4;
	display: block;
	background-size: 10px;
	background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:hover {
	background-color: #d0cbcb;
}
```

The base style for our buttons will be determined by the code above.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676879714510/2e0fb94d-72a4-4d03-a997-2e8953f53054.gif align="center")

To give arrow buttons some flair, we must use `::-webkit-scrollbar-button` pseudo-element along with other pseudo-classes.

* `:single-button`
    
* `:vertical`
    
* `:decrement`
    
* `:increment`
    

Now I will customize the arrow buttons.

For vertical scrollbar arrow buttons, you have to use `:vertical` pseudo-class to add custom styles.

Two other pseudo-classes are used `:decrement` and `:increment` with `:vertical` for **up and down arrow buttons** respectively.

In this case, you can also add SVG icons and other CSS properties.

```css
/* Up arrow*/
::-webkit-scrollbar-button:single-button:vertical:decrement {
	height: 14px;
	width: 16px;
	background-position: center 4px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down arrow*/
::-webkit-scrollbar-button:single-button:vertical:increment {
	height: 14px;
	width: 16px;
	background-position: center 5px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='<http://www.w3.org/2000/svg>' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676879751547/bc5fb906-e1cb-4448-8ec8-3750c1508997.gif align="center")

# **Create Custom Scrollbars in Firefox**

There aren't many customization choices with Firefox. Firefox has two CSS properties that can be used to give its scrollbars a custom style.

Although, you don’t need a custom scrollbar in Firefox as the default one looks way better than other browsers.

* `scrollbar-width` - This property allows us to set the width or thickness of the scrollbar. **It accepts three values: auto, thin, and none**. Here, `auto` is the default value, `thin` reduces the scrollbar's thickness from the default, and `none` gets rid of the scrollbar entirely.
    
* `scrollbar-color` - We can customise the colour of the scrollbar's thumb and track using this property. It accepts `auto` as its value. `auto` is the default value. But you can pass two valid color names like red, blue, etc or you can pass two color codes like #FC9901, #F5F5F5.
    
    * **In** `scrollbar-color` property, first color applies to the thumb of the scrollbar. The second color applies to the track of the scrollbar.
        

> **📝 Note:** Whenever we use these two properties, we must use them on the root element.

We can add styles for our scrollbars

```css
* {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;;
}
```

Here, I am selecting `*` it means everything. When you apply these properties using `*` then it works properly for all scrollbars.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676879794358/9a9d4b8b-4c66-4658-a28e-e8af12949482.gif align="center")

If you set `thin` for `scrollbar-width` property, it will remove the arrow buttons and the scrollbar becomes very thin. Using it will get quite challenging.

But if you only use the `scrollbar-color` property and not the `scrollbar-width`, the default thickness, as well as the color, is applied. I believe it offers a better user experience and looks nicer.

If you have to use the `scrollbar-width` property for any reason, then set it to `auto` not `thin`.

# Some Custom ScrollBars

I have made some custom ScrollBars for you, [<mark>Codepen</mark>](https://codepen.io/sahilchandravanshi/pen/dyqYYeM).

# Conclusion

In this article, I have covered every component of a scrollbar., how you can customize them, their browser support, etc.

I hope you now clearly understand how to design unique scrollbars in CSS for any web page. Do, Share your thoughts on this!