Shahed Nasser

Posted on Feb 15, 2022 • Originally published at blog.shahednasser.com on Feb 15, 2022

How to Style a Scrollbar with CSS

#css #beginners #webdev #programming

This article was originally published on my personal blog.

Scrollbars usually are styled based on the browser or operating system the website is viewed in. This means that your website's scrollbar will not have a unified look across platforms. Although this is generally fine, it's cool to have a good-looking scrollbar regardless of what browser the user is using!

However, styling the scrollbar can be tricky in CSS. You'll need to use pseudo-element selectors.

In this article, you'll learn how you can style a scrollbar with CSS and which pseudo-element selectors you need to use.

Pseudo-Element Selectos Compatibility

The pseudo-element selectors mentioned in this tutorial will only work on Webkit browsers. So, it will work on most modern browsers like Chrome and Safari.

However, they will not work on Firefox. Alternatively, you can use the scrollbar-width and scrollbar-color properties.

::-webkit-scrollbar

This pseudo-element selector is the base selector you need to use when customizing your scrollbar. It is used to specify the width of a scrollbar.

Note that if this selector is used on a specific element (not the scrollbar of the entire page), then you need to specify overflow: scroll; on the element, or else the scrollbar won't show.

Apply the following styling to set the width of the page's scrollbar:

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

If you try this out, you'll notice that no scroll bar appears. This is because you need to add a background color for the scrollbar track or handle.

::-webkit-scrollbar-thumb

You can use this pseudo-element selector to style the thumb of the scrollbar. This means the part you can drag to scroll the page.

For example, you can use this selector to make its background red and give it a border-radius:

::-webkit-scrollbar-thumb {
    background: #ef4444;
    border-radius: 20px;
}

::-webkit-scrollbar-track

You can use this pseudo-element selector to style the track. This is the part that is below the thumb.

Another pseudo-element selector that can be used is ::-webkit-scrollbar-track-piece, which is the part of the scrollbar not covered by the handler. The ::-webkit-scrollbar-track-piece is on a higher layer than ::-webkit-scrollbar-track.

For example, you can use it to add a background color to the track:

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

::-webkit-scrollbar-button

You can use this to style the up and down (or left and right for horizontal scrollbars) buttons.

This will apply styling to all scrollbar buttons. This means it will apply the styling for both the horizontal and vertical scrollbar buttons.

To apply specific styling for specific buttons here's what you need to use:

::-webkit-scrollbar-button:vertical:start: This is for the up button in the vertical scrollbar.
::-webkit-scrollbar-button:vertical:end: This is for the down button in the vertical scrollbar.
::-webkit-scrollbar-button:horizontal:start: This is for the left button in the horizontal scrollbar.
::-webkit-scrollbar-button:horizontal:end: This is for the right button in the horizontal scrollbar.

Additionally, each button has a :increment and :decrement selector.

In this example, I'll add styling for the buttons of a vertical scrollbar:

::-webkit-scrollbar-button {
    display: block;
    background-color: #b91c1c;
    background-repeat: no-repeat;   
    background-size: 50%;
    background-position: center;
}

::-webkit-scrollbar-button:vertical:start:increment {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg');   
}

::-webkit-scrollbar-button:vertical:start:decrement {
    display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
    display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg');   
}

The properties in ::-webkit-scrollbar-button will apply for all scrollbar buttons. In the example, I add a background color. I also set the display to block because some browsers or operating systems might have it hidden by default. Finally, I add background-related properties because I will use background images to show the up and down icons.

The ::-webkit-scrollbar-button:vertical:start:increment selector will target the increment part of the up button of the vertical scrollbar. I use it to show the icon as a background image.

The ::-webkit-scrollbar-button:vertical:start:decrement selector will target the decrement part of the up button of the vertical scrollbar. I use it to hide the decrement part as it is not necessary for the up button.

The ::-webkit-scrollbar-button:vertical:end:increment selector will target the increment part of the down button of the vertical scrollbar. I use it to hide the increment part as it is not necessary for the down button.

The ::-webkit-scrollbar-button:vertical:end:decrement selector will target the decrement part of the down button of the vertical scrollbar. I use it to show the icon as a background image.

::-webkit-scrollbar-corner

This pseudo-element selector is used to style the space between the vertical and horizontal scrollbars.

For example, you can use it to set different background color:

::-webkit-scrollbar-corner {
    background-color: #7f1d1d;
}

Conclusion

Scrollbars can be easily styled on your website using these pseudo-element selectors. You can style them to make sure they match your website's look and feel regardless of what platform your website is opened on.

As mentioned earlier, these selectors will only work on Webkit browsers. Please check out MDN's browser compatibility table for further information.