Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

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.

The scrollbar-width property accepts three values:


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.

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:


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.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
3 min read

align-content: The Simplest Way to Center Content with CSS

Finally, we can center things in block layouts without flexbox gymnastics

Dec 13, 2024
Read article
Webdev
3 min read

CSS Supports Nesting Now

CSS nesting is finally supported in all major browsers. Write cleaner, organized stylesheets without Sass or Less

Dec 6, 2024
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
4 min read

Mental Toughness is the Best Quality a Developer Can Have

Mental toughness gets developers through challenges like debugging, picking up new tools, and hitting tight deadlines. It’s about staying calm and pushing through when things get tough.

Sep 12, 2024
Read article
Webdev
3 min read

CSS @supports: Write Future-Proof CSS

Detect CSS feature support and provide smart fallbacks with @supports

Dec 6, 2024
Read article
Webdev
3 min read

Preloading Responsive Images

How to properly preload responsive images to improve initial page load

Nov 28, 2024
Read article
Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Webdev
2 min read

link rel='modulepreload': Optimize JavaScript Module Loading

The rel='modulepreload' indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution

Dec 4, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/css-scrollbar-width-and-scrollbar-gutter. It was written by a human and polished using grammar tools for clarity.