CSS Scrollbars
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
Properties
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.
Specifications
Specification |
---|
CSS Scrollbars Styling Module Level 1 # scrollbar-width |
CSS Scrollbars Styling Module Level 1 # scrollbar-color |
Browser compatibility
css.properties.scrollbar-width
BCD tables only load in the browser
css.properties.scrollbar-color
BCD tables only load in the browser