CSS scrollbar-width Property

Description

The scrollbar-width CSS property is used to control the width of scrollbars within an element, such as a container with overflowed content. It provides two possible values: "auto" and "thin." When set to "auto," it allows the browser to determine the width of the scrollbar, typically using the system or platform-specific default. On the other hand, setting it to "thin" enforces a narrower scrollbar, giving web designers more control over the visual appearance of scrollbars. This property is especially useful for achieving a consistent design across different browsers and platforms.

Initial value: auto
Applies to: scrolling boxes
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollbarWidth

Syntax

scrollbar-width: auto | thin | none

Values

auto
thin
none

Example

HTML

<div class="scroller">

  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion

  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens

  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts

  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber

  earthnut pea peanut soko zucchini.

</div>

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS scrollbar-width property.

Desktop

115	115	64	102	x

Tablets / Mobile

115	64	x	x	x	x

Last updated by CSSPortal on: 31st December 2023

Support Us