The scrollbar-width CSS property tackles a common challenge in web design - balancing the need for scrollable content with visual aesthetics. This property lets us control how thick scrollbars appear, making them more subtle without sacrificing functionality.
scrollbar-width
Baseline 2024 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since December 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The scrollbar-width property accepts three values:
.element { /* Default platform scrollbar */ scrollbar-width: auto; /* Thinner variant */ scrollbar-width: thin; /* No visible scrollbar */ scrollbar-width: none;}Scroll each container to see how different scrollbar-width values affect the interface. Notice how 'thin' provides a balanced compromise between aesthetics and usability.
scrollbar-width: auto
scrollbar-width: thin
scrollbar-width: none
⚠️ While 'none' might seem appealing, it can impact accessibility. I recommend using 'thin' for a better user experience.
scrollbar-gutter
Baseline 2024 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since December 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The space where a scrollbar lives is called the scrollbar gutter - it sits between the inner border edge and outer padding edge of an element. browsers handle this space in two different ways:
- Classic scrollbars: Take up actual space in your layout
- Overlay scrollbars: Float on top of your content (common on macOS)
The scrollbar-gutter property lets us control how browsers handle this space. It accepts three values:
.element { /* Default behavior - scrollbar appears when needed */ scrollbar-gutter: auto; /* Reserve space for scrollbar even when not present */ scrollbar-gutter: stable; /* Reserve space on both edges for symmetry */ scrollbar-gutter: stable both-edges;}When should you use scrollbar-width or scrollbar-gutter?
They’re most useful in components where content length changes often - exactly where you don’t want things jumping around or shifting.
scrollbar-width works great for
- Keeping chat message lists readable with a thin scrollbar
- Sidebars like in VS Code where you want subtle scrolling
- Data grids with lots of rows but limited vertical space
- Making a Spotify-style horizontal media scroller look polished
scrollbar-gutter really shines when
- Building a messenger app where new messages keep coming in
- Creating modals with dynamic content that might need scrolling
- Making data tables where rows get added or removed often
- Handling sidebar navigation that expands and collapses
The key is using them together in places where content is dynamic and you want smooth scrolling without layout surprises. Nothing’s worse than clicking something just as the page shifts because a scrollbar popped in.
Word of caution: These properties are powerful, but that doesn’t mean every scrollbar needs customizing. Users have muscle memory for how scrollbars work. Only tweak scrollbars when it genuinely improves the user experience - like preventing those annoying layout jumps or cleaning up a cluttered interface.
