No Login Data Private Local Save

scrollbar‑gutter Tester - Online Prevent Layout Shift

26
0
0
0

Scrollbar-Gutter Tester

Instantly compare scrollbar-gutter values and visualize layout shift prevention

Detected Scrollbar Width: -- px
Left Panel:
Right Panel:
Presets:
Left Panel scrollbar-gutter: stable

Welcome! This panel demonstrates scrollbar-gutter in action.

When content grows and a scrollbar appears, the gutter behavior determines whether your layout shifts.

Item AlphaItem BetaItem Gamma

📏 Current content is short — no scrollbar needed.

Inner width: -- px Shift! No scrollbar
Right Panel scrollbar-gutter: auto

Welcome! This panel demonstrates scrollbar-gutter in action.

When content grows and a scrollbar appears, the gutter behavior determines whether your layout shifts.

Item AlphaItem BetaItem Gamma

📏 Current content is short — no scrollbar needed.

Inner width: -- px Shift! No scrollbar
Frequently Asked Questions
What is scrollbar-gutter in CSS?
scrollbar-gutter is a CSS property that controls the space (gutter) reserved for the scrollbar. It was introduced in the CSS Overflow Module Level 3 specification. The property allows developers to stabilize the layout by reserving space for the scrollbar even when it's not visible, preventing unwanted layout shifts when the scrollbar appears or disappears. Supported values include auto (default), stable, and stable both-edges.
How does scrollbar-gutter: stable prevent layout shift?
When using scrollbar-gutter: stable, the browser always reserves the scrollbar's track space, regardless of whether a scrollbar is actually visible. Without it (using auto), the scrollbar appears and disappears dynamically, changing the available content width by approximately 15–17px on Windows. This sudden width change causes text reflow and element repositioning — a major contributor to Cumulative Layout Shift (CLS), which is a Core Web Vital metric. By reserving the space consistently, stable ensures the layout never shifts.
What's the difference between auto and stable?
  • auto (default): The browser decides when to show the gutter. If no scrollbar is needed, no space is reserved. When a scrollbar appears, it takes up space and shrinks the content area — causing layout shift.
  • stable: The gutter space is always reserved, even if the content is short and no scrollbar is needed. The content width remains constant regardless of scrollbar visibility, eliminating layout shift entirely.
What does stable both-edges do?
scrollbar-gutter: stable both-edges reserves gutter space on both the left and right edges of the element. This is particularly useful for symmetrical layouts, bidirectional (LTR/RTL) text support, or designs where visual balance is critical. In a left-to-right context, the left gutter is typically unused, but it ensures the layout remains perfectly centered regardless of scrollbar presence on either side.
Why don't I see any difference on macOS?
macOS uses overlay scrollbars by default — scrollbars float on top of the content and don't occupy layout space (scrollbar width = 0px). This means scrollbar-gutter has no visible effect in the default macOS configuration. To see the effect, go to System Settings → Appearance → Show scroll bars and select "Always". Windows and most Linux distributions show classic scrollbars that occupy space, making the effect immediately visible.
What is the typical scrollbar width across platforms?
Scrollbar widths vary by platform and browser:
  • Windows (Chrome/Edge/Firefox): 17px (classic theme)
  • macOS (with "Always" scrollbars): ~15px
  • Linux (GNOME/GTK): 12–16px (varies by theme)
  • macOS (default overlay): 0px
  • Mobile browsers: 0px (overlay, no layout impact)
This variability makes scrollbar-gutter: stable especially valuable — you don't need to guess or hardcode scrollbar widths.
How does scrollbar-gutter relate to CLS (Cumulative Layout Shift)?
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability. When a page's content shifts unexpectedly (e.g., due to a scrollbar appearing), it increases CLS and degrades user experience. A common scenario: navigating from a short page (no scrollbar) to a long page (scrollbar appears) causes the entire layout to jump by ~17px. Using scrollbar-gutter: stable on the <html> or <body> element prevents this, helping achieve a CLS score of 0.
Can I use scrollbar-gutter with overflow: hidden?
Yes! scrollbar-gutter: stable works even with overflow: hidden. The gutter space is reserved regardless of the overflow setting, ensuring that if you dynamically change overflow (e.g., opening a modal that locks body scroll), the layout doesn't shift. This is a common pattern: html { scrollbar-gutter: stable; } combined with body.overflow-hidden when modals are open.
What's the browser compatibility for scrollbar-gutter?
scrollbar-gutter is supported in all modern browsers:
  • Chrome 94+ (September 2021)
  • Edge 94+
  • Firefox 97+ (February 2022)
  • Safari 16.0+ (partial support; both-edges may have limited support)
  • Opera 80+
As of 2024, global support exceeds 92% of users. For older browsers, the property is simply ignored (graceful degradation to auto behavior).
How do I apply scrollbar-gutter globally to prevent layout shifts?
The recommended approach is to apply it to the root element: 
html {
  scrollbar-gutter: stable;
}
This ensures the gutter is reserved across all pages. Some developers also apply it to specific scrollable containers (sidebars, modals, etc.) where internal layout stability is critical. Note: if your design uses a fixed header with overflow-y: auto on the body, apply it to the scrolling container instead.
What's the difference between scrollbar-gutter and the old overflow: overlay?
overflow: overlay (deprecated, removed from the spec) made scrollbars appear as overlays without taking layout space — the opposite goal of scrollbar-gutter: stable. While overlay prevented layout shifts by never reserving space (always overlaying), it caused content to be hidden behind scrollbars. scrollbar-gutter: stable takes the better approach: always reserving space so content is never obscured and layout never shifts. overflow: overlay should not be used in modern projects.
How can I detect the scrollbar width in JavaScript?
A reliable method to measure the system scrollbar width: 
function getScrollbarWidth() {
  const el = document.createElement('div');
  el.style.cssText = 'overflow:scroll;visibility:hidden;position:absolute;width:100px;';
  document.body.appendChild(el);
  const w = el.offsetWidth - el.clientWidth;
  el.remove();
  return w; // Typically 0 or 15-17
}
This tool automatically runs this detection on page load and displays the result.
🔧 Related Tools