Interface Recommended

Keep room for the scrollbar

Keep space for the scrollbar with scrollbar-gutter: stable, so the page doesn't shift when scrolling is locked or unlocked.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Add scrollbar-gutter: stable to html. Browsers with overlay scrollbars, such as on phones and default macOS, have no gutter to keep and are unaffected.

Example

html { scrollbar-gutter: stable; }

How to check

On a desktop browser with classic scrollbars, the main element's left edge stays at the same x position before and after a modal opens.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/scrollbar-gutter.