Styled scrollbars
scrollbar-width, scrollbar-color and scrollbar-gutter
Chrome121
Edge121
Firefox97
Safari26.2
Features it needs
- scrollbar-widthNewly available
- scrollbar-colorNewly available
- scrollbar-gutterNewly available
Custom scrollbar libraries hide the real scrollbar and draw a fake one, which costs you native momentum scrolling, keyboard behaviour and accessibility. The standard properties restyle the actual scrollbar instead: scrollbar-width for thin or none, scrollbar-color for the thumb and track. scrollbar-gutter: stable is the one worth adding regardless, because it reserves the gutter and stops the page shifting sideways when content grows tall enough to need a scrollbar.
When this applies
Restyling a scrollbar to match a dark theme, or stopping layout shift when a scrollbar appears.
The native approach
/* Reserve the gutter so the page does not jump. */
html {
scrollbar-gutter: stable;
}
.panel {
scrollbar-width: thin;
/* thumb, then track */
scrollbar-color: #666 transparent;
overflow-y: auto;
}When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- The design calls for a scrollbar shape the standard properties cannot express, such as a rounded floating thumb with a custom width in pixels. scrollbar-width only offers auto, thin and none.
- You need the overlay-style scrollbar that appears on hover and takes no layout space on every platform.
- You need identical scrollbars across operating systems for a design comp. Native scrollbars still look like the platform's.
- You are relying on the library for scroll shadows or a virtualised list, which these properties do not address.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.
- Customize scrollbar color and thicknessvisual-design
- Adapt scrollbar to contrast preferencesvisual-design