Customizing Scrollbars in CSS

Technical writer

CSS

16.01.2025

Reading time: 5 min

You can style scrollbars to be narrow or wide, change colors, or even hide them. This is a relatively simple task, but it comes with some challenges regarding cross-browser compatibility. Let's explore how to properly create a custom scrollbar.

Suppose the project manager came up with an updated design for the website server page. The mockups show that the scrollbars have custom styles using corporate colors. It looks interesting, and now we need to figure out how to implement this scrollbar styling.

The solution is quick. In 2018, the CSS Scrollbars specification was introduced, which defines how the scrollbar's appearance can be customized. This specification introduced two new properties that affect the visual style of the scrollbar:

scrollbar-color — controls the color of the scrollbar.
scrollbar-width — controls the width of the scrollbar.

Customizing the scrollbar is now a five-minute task. Let’s check this in practice.

Applying CSS Scrollbars Properties

Before diving into how to style the scrollbars, let’s first understand their components. The operating system and browser do not matter here. All scrollbars have at least two elements:

Thumb — the draggable part that allows us to scroll.
Track — the area along which the thumb moves.

Now, let’s apply some properties to style these elements. First, we will start with the width of the scrollbar. The scrollbar-width property has three possible values:

auto — the default width.
thin — a thin scrollbar.
none — hides the scrollbar.

You cannot specify the width in pixels or percentages. This restriction is in place to ensure consistency in how control elements are displayed across different browsers and operating systems — or, in simpler terms, to avoid a mess of custom solutions that could confuse users.

The scrollbar-color property accepts two values: the first one sets the color of the thumb, and the second one sets the color of the track. The default value is auto, which tells the browser to use the default system settings.

Let’s combine both properties and apply the following styling:

body {
  scrollbar-width: thin;
  scrollbar-color: green black;
}

When you check this in a browser, you will see that the scrollbar on the page becomes thin and black and green.

Cross-Browser Compatibility

In the test environment, styling the scrollbar with scrollbar-color and scrollbar-width looks great. But before sending it to production, we need to check cross-browser compatibility — after all, not everyone uses the same browser.

When we open the styled page in Safari, we notice that the scrollbar remains in its default style. To check our suspicions, let’s look up the support for the CSS Scrollbars properties on Can I Use. The situation is disappointing. Four years after the specification was introduced, the convenient scrollbar customization is still unavailable in this browser.

So, does this mean we won’t be able to implement the designed layout and will have to change everything?

Don't worry, there’s a solution. To modify the appearance of the scrollbar in Safari, we can use pseudo-elements:

::-webkit-scrollbar — controls the entire navigation element.
::-webkit-scrollbar-track — controls the track.
::-webkit-scrollbar-thumb — controls the thumb (draggable part).

Using pseudo-elements may seem like a hack, but there's no other option. Let’s add some styles for cross-browser compatibility:

body::-webkit-scrollbar {
  width: 15px; /* Width of the entire navigation element */
}

body::-webkit-scrollbar-track {
  background: #fff; /* Color of the track */
}

body::-webkit-scrollbar-thumb {
  background-color: #050c26; /* Thumb color */
  border-radius: 20px; /* Roundness of the thumb */
  border: 3px solid #050c26; /* Thumb border styling */
}

The obvious advantage of this approach is that we can explicitly set the width of the scrollbar. The large header will match the color of a very wide scrollbar. A separate specification for the scrollbar element doesn't offer this flexibility. The options are limited to either automatic width calculation or displaying a thin navigation element (as much as possible, considering system settings).

The same goes for colors. With pseudo-elements, we can set not just colors but also gradients. Let’s slightly modify the thumb style:

body::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #EECFBA, #C5DDE8); /* Gradient effect */
  border-radius: 20px;
  border: 3px solid #050c26;
}

Now, the thumb will have a gradient effect that changes colors.

The downside is that this is outdated syntax. The CSS Scrollbars specification explicitly mentions that using prefixed pseudo-elements related to the scrollbar is considered incorrect. However, until other browsers support the new properties, we are forced to use prefixed pseudo-elements to maintain cross-browser compatibility.

Conclusion

For now, to create scrollbar styles, you still need to use both approaches — if cross-browser compatibility is important to you. However, when adding pseudo-elements, keep in mind that their use may soon become obsolete. According to modern standards, this is not the best solution for styling scrollbars. But aside from standards, there’s also the practical need, which forces us to make compromises.

CSS

16.01.2025

Reading time: 5 min

Similar

CSS

Customizing Scrollbars in CSS

Applying CSS Scrollbars Properties

Cross-Browser Compatibility

Conclusion

Similar

How to Create a Draggable Element

How to Change the Color of HTML Elements

How to Change a CSS Background Image’s Opacity

Do you have questions, comments, or concerns?

Do you have questions,
comments, or concerns?