CSS scrollbar-width Property

Sets the visual thickness of an element's scrollbar. It allows developers to slim down the scrollbar or hide it entirely while maintaining scrolling functionality.

selector { scrollbar-width: auto | thin | none; }
auto The default scrollbar width determined by the browser platform.
thin Instructs the browser to use a narrower or thinner scrollbar variant.
none Hides the scrollbar completely without disabling the ability to scroll the content.

Code Examples

A basic implementation showing how to apply a thin scrollbar to a fixed-size container.

<div style="width: 200px; height: 100px; overflow-y: scroll; scrollbar-width: thin; border: 1px solid #cccccc;">
  <p>This box uses a thin scrollbar to save space in tight layouts. It keeps the UI looking clean while remaining functional.</p>
  <p>More content here to ensure the scrollbar actually appears for the demonstration.</p>
</div>

An advanced example using JavaScript to toggle between a visible and hidden scrollbar dynamically.

<div id="scrollBox" style="width: 300px; height: 150px; overflow-y: scroll; scrollbar-width: auto; background-color: #f9f9f9; padding: 10px;">
  <p>Dynamic scrollbar control. Use the button below to toggle the visibility of this scrollbar via JavaScript.</p>
  <p>Content block one.</p>
  <p>Content block two.</p>
  <p>Content block three.</p>
</div>
<button onclick="toggleScrollbar()" style="margin-top: 10px;">Toggle Scrollbar</button>

<script>
function toggleScrollbar() {
  const box = document.getElementById("scrollBox");
  // Accessing the scrollbarWidth property via the style object
  if (box.style.scrollbarWidth === "none") {
    box.style.scrollbarWidth = "auto";
    box.style.backgroundColor = "#f9f9f9";
  } else {
    box.style.scrollbarWidth = "none";
    box.style.backgroundColor = "#e0e0e0";
  }
}
</script>

Pro Tip

Pair this property with "scrollbar-gutter: stable". This prevents your layout from "jumping" or shifting horizontally when content grows long enough to trigger a scrollbar. It reserves the space for the scrollbar ahead of time, keeping your UI rock solid and professional.

Deep Dive

This property provides a standardized way to control scrollbar girth across modern browsers. Think of it as a high-level toggle for the scrollbar's hallway width. Before this, developers had to use non-standard vendor prefixes like "-webkit-scrollbar" to achieve similar results. It works by telling the user agent which of its internal scrollbar styles to apply. Setting it to "thin" is perfect for minimalist sidebars or widgets where a bulky default scrollbar disrupts the design. Using "none" removes the visual track and thumb entirely, but the element remains scrollable via mouse wheel, touch gestures, or keyboard. Note that this property specifically controls the width, while its sibling "scrollbar-color" handles the aesthetics.

Best Practices

Stick to "auto" for main page content to ensure maximum usability across different hardware. Use "thin" for secondary UI elements like internal dashboard panels or chat windows to save screen real estate. If you choose "none" to hide the bar, you must provide a visual cue—like a gradient fade or a shadow—to signal to the user that the container holds more content.

Common Pitfalls

A common mistake is assuming "none" works like "overflow: hidden". It does not; the user can still scroll. Another pitfall is forgetting that this property does not allow for specific pixel values like "5px". You are limited to the keywords provided by the browser. Also, remember that this property does not affect the color of the scrollbar, only the space it occupies.

Accessibility

Hiding a scrollbar with "none" can be a major accessibility hurdle. Users who rely on the scrollbar thumb to navigate or to gauge how much content is left on a page will be lost. Always ensure that the scrollable nature of the element is obvious through other design patterns if you decide to hide the native scroll tools.

Dev Data Table: scrollbar-width property

default auto
animatable no
inherited no
experimental no
year_intro 2018
year_standard 2024
js_syntax_1 element.style.scrollbarWidth = "thin";
js_syntax_2 element.style.setProperty("scrollbar-width", "none");
js_note When targeting this property in JavaScript, use camelCase for the style object or the kebab-case string within the setProperty method.
browsers { "Chrome": 121, "Edge": 121, "Firefox": 64, "Safari": 18.2, "Opera": 107, "Chrome Android": 121, "Safari on iOS": 18.2, "Samsung Internet": 25, "Opera Mobile": 107 }
results render here...