scrollbar-color
The scrollbar-color CSS property sets the color of the scrollbar track and thumb.
The track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.
The thumb refers to the moving part of the scrollbar, which usually floats on top of the track.
When scrollbar-color value is set on the document's root element, the values are applied to the viewport scrollbars.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | 64 | 26.2 | 121 | 26.2 | |
auto | 121 | 121 | 64 | 26.2 | 121 | 26.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Specify scrollbar and track colors */
.dark-theme {
scrollbar-color: #6b7280 #1f2937;
}
/* "auto" uses the browser default */
.default-scroll {
scrollbar-color: auto;
}Live demo
Use cases
-
Browser-native behavior
Use scrollbar-color to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
-
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.