📏 CSS scrollbar-width — Complete Tutorial

The CSS scrollbar-width property controls the thickness of scrollbars in Firefox. This property is currently **Firefox-only** and has no effect in Chrome, Edge, or Safari. It is useful when building minimal UIs, chat layouts, dashboards, or custom scrolling components.

>>“scrollbar-width lets you create slimmer, cleaner scrollbars — but only in Firefox.”

Note

✔ Works ONLY in Firefox
✔ Controls scrollbar thickness
✔ Use with ::-webkit-scrollbar for cross-browser support

📦 Syntax

scrollbar-width syntax

scrollbar-width: auto | thin | none;
ValueDescription
autoDefault scrollbar width
thinDisplays a small/thin scrollbar
noneHides scrollbar while keeping scroll functionality

🎨 1. Make Scrollbar Thin

thin scrollbar

.box {
  overflow-y: scroll;
  scrollbar-width: thin;
}

Common for chat apps, tables, and dashboards.

🎨 2. Hide Scrollbar Completely

hide scrollbar

.hidden-scroll {
  overflow-y: scroll;
  scrollbar-width: none; /* Only hides in Firefox */
}

Note

Users can still scroll — the scrollbar is just not visible.

🎨 3. Default Behavior

default

.normal {
  scrollbar-width: auto;
}

🎨 4. Combine with scrollbar-color

Firefox also supports scrollbar-color for styling track & thumb.

scrollbar-color

.styled-scroll {
  scrollbar-width: thin;
  scrollbar-color: #555 #ddd; /* thumb track */
}

📌 Cross-Browser Support Tip

Since scrollbar-width works only in Firefox, you must use WebKit pseudo-elements for Chrome / Edge / Safari.

WebKit scrollbar styling

.styled-scroll::-webkit-scrollbar {
  width: 6px;
}

.styled-scroll::-webkit-scrollbar-thumb {
  background: #555;
}

.styled-scroll::-webkit-scrollbar-track {
  background: #ddd;
}

Note

Combine both approaches for full browser support.

🧪 Real-World Use Cases

1️⃣ Chat Applications

chat

.chat-box {
  overflow-y: scroll;
  scrollbar-width: thin;
}

2️⃣ Tables / Data Grids

table scroll

.table-container {
  overflow: auto;
  scrollbar-width: thin;
}

3️⃣ Minimal UI Panels

dashboard panel

.panel {
  overflow-y: auto;
  scrollbar-width: none;
}

⚠️ Common Mistakes

  • ❌ Expecting it to work in Chrome or Safari (Firefox only!)
  • ❌ Setting scrollbar-width on elements without overflow
  • ❌ Using none without ensuring users can still scroll

Note

Add padding or visual hints so users know scrolling is possible when hiding scrollbars.

🔥 Summary

scrollbar-width provides a simple, Firefox-only way to control scrollbar thickness. Paired with scrollbar-color and WebKit scrollbar styling, it enables fully customized scrollbars across browsers.

>>“scrollbar-width makes scrollbars minimal, elegant, and unobtrusive.”