This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
CSS Scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by Windows IE 5.5.
Basic Example
In this example we have chosen to use a thin scrollbar, with a green track and purple thumb.
.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; }
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>
Result
Reference
CSS Properties
Specifications
Specification | Status | Comment |
---|---|---|
CSS Scrollbars Level 1 | Working Draft | Initial definition. |
Accessibility concerns
When you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input.
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
scrollbar-width
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollbar-width | Chrome No support No | Edge No support No | Firefox
Full support
64
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
64
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
scrollbar-color
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollbar-color | Chrome No support No | Edge No support No | Firefox
Full support
64
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
64
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.