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.
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.
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).
As of May 2023, the
scrollbar-color property accepts the following values:
|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.
|Two color values. It applies the first one to the scrollbar thumb, and the second to the scrollbar track
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.
scrollbar-coloris 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.
For a detailed breakdown of scrollbar styling support, refer to the second link in the Useful Resources below.
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.