🛠️ CSS scrollbar-gutter — Complete Tutorial

The CSS scrollbar-gutter property provides control over whether space is reserved for scrollbars—preventing layout shift when scrollbars appear or disappear. This is especially useful in responsive layouts, grid systems, and UI panels where content jumps due to dynamic scrollbars.

>>“scrollbar-gutter prevents layout shift caused by appearing and disappearing scrollbars.”

Note

✔ Helps avoid layout shift (CLS)

✔ Useful when content may overflow sometimes

✔ Great for web apps, forms, chat layouts, dashboards

📦 Syntax

scrollbar-gutter syntax

scrollbar-gutter: auto | stable | always | both-edges;
ValueDescription
autoDefault — no space reserved unless necessary
stableAlways reserve gutter on the side where scrollbars appear
alwaysEnsures gutter is always present (even without overflow)
both-edgesAdd a gutter on both sides (mirrored) — useful in RTL layouts

📌 Why Use scrollbar-gutter?

  • Prevents layout shift when scrollbars appear
  • Keeps grid layouts aligned even with overflow
  • Useful for dynamic content containers (chat, feeds, lists)
  • Improves UI consistency across browsers

🎨 1. Basic Example — Stable Scrollbar

stable

.container {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

A gutter is always reserved so the layout won’t shift when scrolling begins.

🎨 2. Prevent Layout Shift in Grid Layouts

grid + gutter

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  scrollbar-gutter: stable both-edges;
}

Even when one grid panel gets a scrollbar, both sides stay aligned.

🎨 3. Always Reserve Scrollbar Space

Useful for UI where overflow appears often but unpredictably.

always gutter

.content {
  overflow-y: auto;
  scrollbar-gutter: always;
}

🎨 4. Gutter on Both Sides

both edges

.panel {
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

Helpful for RTL + LTR mixed interfaces.

🎨 5. Combine with scrollbar-width & color

full scrollbar styling

.chat-box {
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #666 #ddd;
}

🧪 Real-World Use Cases

1️⃣ Chat Applications

chat

.chat-window {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

Prevents messages from shifting when scrollbar appears.

2️⃣ Dashboard Panels

panel

.dashboard-panel {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

3️⃣ Product Listings / Grids

product grid

.product-list {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Keeps product cards aligned across columns.

⚠️ Common Mistakes

  • ❌ Assuming scrollbar-gutter styles the scrollbar (it only reserves space)
  • ❌ Forgetting to add overflow — no gutter without scrollable content
  • ❌ Using both-edges unnecessarily (wastes space)

Note

scrollbar-gutter prevents layout shift — it does NOT style the scrollbar itself.

🔥 Summary

scrollbar-gutter is a powerful tool to prevent layout shifts, especially in responsive UI, grid layouts, chat panels, and dynamic content environments. When used with scrollbar-width and scrollbar-color, it enables highly stable, polished scrolling experiences.

>>“No more jumping layouts — scrollbar-gutter keeps your UI perfectly stable.”