---
title: "Keep room for the scrollbar · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/scrollbar-gutter
updated: 2026-10-20
licence: "All rights reserved"
---

# Keep room for the scrollbar

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Keep space for the scrollbar with `scrollbar-gutter: stable`, so the page doesn't shift when scrolling is locked or unlocked.
- How: 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.
- 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.

Example:

```css
html { scrollbar-gutter: stable; }
```

**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`.

- Previous: [Define every colour once](https://agentwranglers.se/playbook/website/interface/colour-as-tokens)
- Next: [Size full-height panels for phones](https://agentwranglers.se/playbook/website/interface/dynamic-viewport-units)
- [Interface](https://agentwranglers.se/playbook/website/interface)