Creating Custom Scrollbars With CSS

In this simple tutorial, I will be showing you how to style the browser's scrollbar so it can suit the aesthetic of your website. This can be done with CSS only so there's no need for any external libraries.

The Scrollbar Properties

In your CSS file, there are 3 main properties we will style with our CSS to create a custom scrollbar.

These include:

::-webkit-scrollbar - the actual scrollbar element
::-webkit-scrollbar-track - the track part of the scrollbar (background)
::-webkit-scrollbar-thumb - the scrollbar handle

`::-webkit-scrollbar`

The first step would be to adjust the width of the scrollbar. By doing so, you will be removing the up and down arrows at the top and bottom of the scrollbar which makes it looks more minimalistic and overall better.

Setting the width to 7px:

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

You can set the width to whatever value you wish. How thin you make it depends on the design of your website so experiment until one floats your boat.

`::-webkit-scrollbar-track`

The next step will be adjusting the background of the track. If you have a dark aesthetic on your website, you will want a dark scrollbar. And of course a light scrollbar if you have a light aesthetic.

To adjust the background of the track:

::-webkit-scrollbar-track {
    background: #222
}

This code sets the background to a dark grey. You can change the color to whatever you want of course.

`::-webkit-scrollbar-thumb`

After that, you will probably want to change the background of the thumb which is the handle you drag up and down to scroll through the page. The color you use will depend on the color theme of your website so adjust it accordingly.

The code:

::-webkit-scrollbar-thumb {
    background: rgb(138, 165, 255)
}

This code sets the background to a light blue, you can change the color of course

Adding A Hover Effect On The Thumb

Adding a hover effect to the handle of the scrollbar is optional however it is always beneficial. You would probably want to set the color to a lighter or darker version of the handle's color rather than a completely different color.

To add a hover color change:

::-webkit-scrollbar-thumb:hover {
    background: rgb(150, 177, 255)
}

Browser Support

The ::webkit-scroll element is supported by Chrome, Edge, Safari and Opera so on those browsers we can modify the look of the browser's default scrollbar. On Firefox, you would need to use other CSS properties like scrollbar-width and scrollbar-color which is a topic for another article.

Take Away

In this article, we've covered how to create a custom scrollbar using CSS without the need for any external libraries. I hope you've learned something useful and can start adding custom scrollbars to your future projects.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

Github: Blake-K-Yeboah

LinkedIn: Blake Yeboah

You can also show your support by buying me a coffee 😃

Creating Custom Scrollbars With CSS

Comments

More from this blog

Optimizing Website Performance for Speed and User Experience

Useful Web APIs For Your Next Project

How to use the Fetch API in JavaScript

Don't Make These Common Mistakes While Learning To Code

Understanding Units In CSS

The Scrollbar Properties

`::-webkit-scrollbar`

`::-webkit-scrollbar-track`

`::-webkit-scrollbar-thumb`

Adding A Hover Effect On The Thumb

Browser Support

Take Away

Command Palette

Comments

More from this blog

The Scrollbar Properties

::-webkit-scrollbar

::-webkit-scrollbar-track

::-webkit-scrollbar-thumb

Adding A Hover Effect On The Thumb

Browser Support

Take Away

`::-webkit-scrollbar`

`::-webkit-scrollbar-track`

`::-webkit-scrollbar-thumb`