How would you use scrollbar-gutter to prevent scrollbar-induced layout shift?

Question and scenario

The page uses overflow: auto: before the interaction there is no overflow, then a classic scrollbar appears. Because it consumes inline space, centered content moves. Explain the CSS design, its boundaries, fallback behavior, and measurable validation.

What the interviewer is testing

• Whether you know that scrollbar-gutter applies to a scrolling box and is not inherited.
• Whether you can distinguish classic and overlay scrollbars and explain stable versus both-edges.
• Whether you understand the scope difference between the root, body, and nested scrollers.
• Whether the plan covers modal locking, RTL, older browsers, and CLS monitoring.

Clarifying questions to ask first

Confirm whether the jump is in the viewport or an inner scroller, whether the operating system uses overlay scrollbars, whether RTL is required, how the modal locks page scrolling, and which browsers and accessibility targets matter. Ask whether the layout must remain geometrically centered or only avoid a one-sided movement when overflow begins.

A 30-second answer framework

I would put scrollbar-gutter: stable on the actual scrolling box so classic-scrollbar space exists before and after overflow; use stable both-edges when symmetric centering matters. Configure the root for viewport scrolling and each inner panel for its own scrolling. Overlay scrollbars generally do not consume layout space, so there is no fixed width to reserve. Keep modal locking, RTL, and legacy fallbacks explicit, then validate with layout-shift instrumentation and a real device matrix.

Step-by-step deep dive

1. Identify the scrolling box. The root controls viewport scrolling; a body declaration is not a substitute for root behavior. An independently scrolling panel needs its own declaration.
2. Choose the value. stable reserves inline space for a classic scrollbar; both-edges adds an equal gutter on the opposite edge to preserve geometric centering.
3. Understand overlays. An overlay scrollbar sits over content and normally consumes no layout space. The user agent and operating system choose the mode; CSS cannot force a classic scrollbar.
4. Coordinate the modal. Use one state machine for locking and restoring page scroll. Avoid adding unconditional padding-right on top of a browser-reserved gutter. Configure a modal's internal scroller separately.
5. Cover compatibility and RTL. Use logical inline edges in modern browsers, keep a minimal fallback for older environments, and test direction, scrollbar side, and safe areas.
6. Measure the result. Record layout-shift performance entries, distinguish shifts before and after user input, and combine lab tests for long lists, modals, and slow networks with field p75 data. A good CLS target is p75 at or below 0.1.

High-quality sample answer

I would declare it on the boxes that actually scroll:

html {
  scrollbar-gutter: stable both-edges;
}

.results-pane {
  overflow: auto;
  scrollbar-gutter: stable;
}

stable keeps classic-scrollbar space present without overflow; both-edges keeps a viewport-centered layout symmetric. If the system uses overlay scrollbars, they already consume no layout space, so I would not promise a fixed pixel reservation. When opening a modal, I would not unconditionally add another scrollbar-width compensation; the locking state machine and gutter policy must agree, while the modal's internal scroller is configured independently.

I would verify root versus body, nested scrollers, RTL, restoration after closing, older-browser fallback, and reduced-motion preferences. I would collect layout-shift entries and field p75 CLS, targeting p75 CLS at or below 0.1. MDN and the W3C specification define the property semantics; web.dev provides the CLS measurement model.

Common mistakes

• Putting scrollbar-gutter on an ordinary parent without checking which element actually scrolls.
• Assuming a body declaration necessarily controls the viewport and ignoring root behavior.
• Promising a fixed pixel reservation for an overlay scrollbar.
• Enabling stable while also adding unconditional padding-right, creating double space when a modal opens.
• Testing only one operating system and a no-RTL screenshot, without measuring CLS or inner panels.

Follow-up questions and responses

Why use both-edges?

One-sided stable reserves the inline edge where the classic scrollbar can appear. If content is centered in the viewport, an equal gutter on the opposite edge preserves geometric symmetry; still test RTL and different scrollbar placements.

Does scrollbar-gutter solve every modal scroll-lock problem?

No. It reserves scrolling-box layout space; it does not implement focus trapping, background inertness, scroll-position restoration, or stacking order. Those remain separate responsibilities, and the lock must not duplicate width compensation.

How do you test overlay and classic scrollbars?

Use at least one classic-scrollbar environment and one overlay-scrollbar environment. Test no overflow, overflow beginning, modal open and close, inner-panel scrolling, RTL, and zoom. Record key-element geometry and layout-shift entries instead of relying only on screenshots.