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
<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>
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-width: thin;
}
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