Codectionary / Developer documentation / CSS

Reserving Space for Scrollbars

scrollbar-gutter can reserve space for a classic scrollbar so content width changes less when scrolling becomes necessary.

What it is and why to use it

scrollbar-gutter can reserve space for a classic scrollbar so content width changes less when scrolling becomes necessary. This is useful in panels whose contents load dynamically. Overlay scrollbars generally do not consume a layout gutter, so the visual effect depends on the operating system and scrollbar configuration.

Common mistakes and limitations

This property does not force the same scrollbar appearance across platforms or reserve arbitrary padding. Do not assume a fixed scrollbar width. Treat it as progressive layout stabilisation and preserve a usable fallback.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="panel"><p>Lesson one</p><p>Lesson two</p><p>Lesson three</p><p>Lesson four</p><p>Lesson five</p></div>

Syntax

scrollbar-gutter: stable;

Examples

Reserving Space for Scrollbars

Run the CSS against the supplied HTML, then experiment with the values.

.panel { height: 7rem; overflow: auto; scrollbar-gutter: stable; border: 1px solid #94a3b8; padding: .5rem; }
.panel p { margin-block: .5rem; }
  1. overflow:auto allows the panel to scroll when needed.
  2. stable requests a reserved gutter for classic scrollbars even when the box does not currently overflow.
  3. Add or remove paragraphs and compare with auto. On overlay-scrollbar systems there may be no visible reserved strip; that is expected.
HTML used by this example
<div class="demo"><div class="panel"><p>Lesson one</p><p>Lesson two</p><p>Lesson three</p><p>Lesson four</p><p>Lesson five</p></div></div>

Best practices

  • This property does not force the same scrollbar appearance across platforms or reserve arbitrary padding. Do not assume a fixed scrollbar width. Treat it as progressive layout stabilisation and preserve a usable fallback.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading