scrollbar-width

By Dan Gold

scrollbar-width requests a native scrollbar thickness. It uses keywords rather than an exact CSS pixel width, and user/platform choices can affect the result.

Compare auto with thin

The two labeled regions have the same overflowing content. Thin requests a narrower native variant where the platform provides one.

HTML and CSS

HTML

<div
  class="viewport auto"
  tabindex="0"
  role="region"
  aria-label="Auto scrollbar practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>
<p>Thin scrollbar:</p>
<div
  class="viewport thin"
  tabindex="0"
  role="region"
  aria-label="Thin scrollbar practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>

CSS

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.auto {
  scrollbar-width: auto;
}
.thin {
  scrollbar-width: thin;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Keep the default for essential scrolling

Auto leaves the scrollbar target at the platform’s ordinary size. Focus the region and use keyboard scrolling to verify content remains reachable.

HTML and CSS

HTML

<div
  class="viewport"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice notes"
>
  <p>First practice note.</p>
  <p>Read the example source.</p>
  <p>Change one value.</p>
  <p>Observe the result.</p>
  <p>Check narrow layouts.</p>
  <p>Compare with the original.</p>
  <p>Last practice note.</p>
</div>

CSS

.viewport {
  max-height: 140px;
  overflow: auto;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.viewport:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}
.viewport {
  scrollbar-width: auto;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Values and defaults

The initial value is auto and the property is not inherited. Thin requests a thinner variant; none hides the scrollbar while leaving the element scrollable. Lengths such as 8px are invalid. A root value applies to viewport scrollbars. Browser/OS preferences may override thickness choices.

Common mistakes

None is not overflow:hidden and does not prevent scrolling. Hiding or shrinking the scrollbar can remove an important navigation affordance for users without a wheel or touch gesture. Prefer auto for essential long content; do not add a custom scrolling library merely to force identical appearance. Check current compatibility rather than repeating Firefox-only support claims.

Learn overflow, scrollbar-color, and scrollbar-gutter.

Sources and browser support

MDN: scrollbar-width describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.