The CSS scrollbar-color Property

Overview

The scrollbar-color property enables you to specify the colors of an element's scrollbar thumb and track. To clarify, the thumb refers to the draggable part of the scrollbar, while the track is the path along which the thumb moves. Just like scrollbar-width, this property holds a candidate recommendation status by the W3C and lacks wide browser support without resorting to non-standard scrollbar styling methods.

Examples and Usage

At the time of writing, the following example only functions correctly in Firefox versions (64-115). Additionally, on macOS, you need to set the "Show scroll bars" setting in System Preferences to "Always" for this property to have any effect. You can refer to this macOS guide for more details.

HTML Structure

<div class="scrollbar-example">
  Using comments in JavaScript should clarify the purpose and functionality of the code, especially in complex or non-obvious sections. Comments can also be used to indicate the authorship of the code, and to provide information about the version or last modification date.
  
  It is important to note that too many or unnecessary comments can make the code hard to read and can be an indication of poor code quality.
  
  Instead of commenting every single line, it's better to use meaningful variable and function names that provide useful information instead of stating the obvious.
</div>

CSS Styling

.scrollbar-example {
  width: 350px; /* Sets the width of the div */
  height: 150px; /* Sets the height of the div */
  overflow-y: scroll; /* Enables vertical scrolling */
  scrollbar-color: #CD3333 #FBBF24; /* Sets the color of the scrollbar thumb and track respectively */
}

The CSS above creates a scrolling div, and the scrollbar-color property is used to customize the color of the scrollbar. In this case, the #CD3333 color(a deep red) is applied to the scrollbar thumb (the draggable part of the scrollbar), and the #FBBF24 color (a vibrant orange) is applied to the track (the path along which the thumb moves).

Values

As of May 2023, the scrollbar-color property accepts the following values:

Value	Description
`auto`	The user agent decides the colors of the scrollbar. The selection should align with platform conventions and might be adjusted per other factors and properties like `color-scheme` to better fit the webpage.
`<color>`	Two color values. It applies the first one to the scrollbar thumb, and the second to the scrollbar track

Associated Properties

scrollbar-width
overflow

Tips and Tricks

Pay careful attention to accessibility when using scrollbar-color. Ensure there is sufficient contrast between the scrollbar and the background for visibility.
Due to the limited support in many browsers, consider using JavaScript libraries for more complex scrollbar customizations when necessary. However, be aware that these solutions may have performance implications and could create an inconsistent user experience.
If scrollbar-color is not suitable for your needs, there are non-standard scrollbar styling methods using vendor-specific pseudo-properties. However, these are not officially part of the CSS standard, and their usage is generally discouraged due to potential compatibility issues.

Browser Compatibility

For a detailed breakdown of scrollbar styling support, refer to the second link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	No	No	No	Yes*	No	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.