The CSS scrollbar-width Property

Overview

The scrollbar-width property enables you to adjust the thickness of an element’s scrollbars. As per the W3C specification, scrollbar-width holds a candidate recommendation status and may be incorporated in future CSS versions.

Additionally, scrollbar styling properties, including scrollbar-width, lack wide browser support and often require both proprietary and unofficial workarounds. However, they should be used cautiously due to potential unexpected behavior or user experience concerns.

The main objective of the property is not aesthetics, but to give authors the option of width adjustment for scrollbars, especially in parts of the user interface with limited space.

Examples and Usage

The example below is only for demonstration purposes. Note that at the time of writing (2023), this example will only function correctly in Firefox versions (64-112), due to the lack of wide browser support.

HTML Structure

<div class="container">
  <p>AUTO</p>
  <textarea class="auto-example">
    Scrollbars are a UI mechanism essential to interact with the page. Operating systems tend to want consistency in such controls to improve usability through familiarity, and users with specific preferences or needs can adjust the appearance of various UI components, including scrollbars, through OS or UA settings. 
    While using this property in support of specific UX goals is appropriate, authors should otherwise refrain from overriding such user preferences.
  </textarea>

  <p>THIN</p>
  <textarea class="thin-example">
    Scrollbars are a UI mechanism essential to interact with the page. Operating systems tend to want consistency in such controls to improve usability through familiarity, and users with specific preferences or needs can adjust the appearance of various UI components, including scrollbars, through OS or UA settings. 
    While using this property in support of specific UX goals is appropriate, authors should otherwise refrain from overriding such user preferences.
  </textarea>

  <p>NONE</p>
  <textarea class="none-example">
    Scrollbars are a UI mechanism essential to interact with the page. Operating systems tend to want consistency in such controls to improve usability through familiarity, and users with specific preferences or needs can adjust the appearance of various UI components, including scrollbars, through OS or UA settings. 
    While using this property in support of specific UX goals is appropriate, authors should otherwise refrain from overriding such user preferences.
  </textarea>
</div>

CSS Styling

textarea {
  width: 300px; /* Sets the width of the textarea */
  height: 100px; /* Sets the height of the textarea */
  resize: none; /* Disables the resize property */
}

.auto-example {
  scrollbar-width: auto; /* Uses the default scrollbar width */
}
.thin-example {
  scrollbar-width: thin; /* Uses a thinner scrollbar width */
}
.none-example {
  scrollbar-width: none; /* Hides the scrollbar completely */
}

In a potential scenario such as this, a text area's scrollbar might occupy valuable space, especially in constrained spaces. The scrollbar-width property allows us to manage this by adjusting the scrollbar's width, thereby influencing the overall appearance and functionality of the text area. However, remember that the auto value uses the default scrollbar width, while thin and none adjust it to be thinner or completely invisible, respectively.

Values

As per the current specifications, the scrollbar-width property accepts the following values:

Value	Description
`auto`	The platform-default scrollbars will be rendered. (default value)
`thin`	A thinner scrollbar from the default, or a thin scrollbar width variant on platforms that offer this option.
`none`	Hides the scrollbar, but does not affect the scrollability of the element.

Associated Properties

scrollbar-color

Tips and Tricks

The scrollbar-width property is closely linked with accessibility. A small or non-visible scrollbar might be useful in certain cases, but it can affect the target size, making it harder for people to use.
When using the none value, it's crucial to provide visual cues or alternatives, as it can prevent mouse-only users without a scroll wheel from accessing hidden content.
Despite potential usefulness, remember that scrollbar-width is not widely supported across browsers. Always consider fallbacks and thoroughly test your implementations to achieve optimal results.

Browser Compatibility

For a detailed breakdown of scrollbar styling support, refer to the second link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	No	No	No	Yes*	No	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.