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, and each one reads in the terminal through its own command.
- Customize scrollbar color and thickness
npx -y modern-web-guidance@latest retrieve "customize-scrollbar-color-and-thickness" - Adapt scrollbar to contrast preferences
npx -y modern-web-guidance@latest retrieve "adapt-scrollbar-to-contrast-preferences"
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- measuring the scrollbar width from innerWidth minus documentElement.clientWidth and padding the body by it