CSS scrollbars styling
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.
Scrollbar styling in action
This example defines a thin scrollbar with a red thumb and an orange track. To view the thumb, you will need to scroll the text. After the scrollbar is visible, hover over it to see the track.
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
Note: When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input.
Reference
CSS properties
Related concepts
overflow-block
CSS propertyoverflow-inline
CSS propertyoverflow-x
CSS propertyoverflow-y
CSS propertyoverflow
CSS shorthand propertyoverflow-clip-margin
CSS propertyscrollbar-gutter
CSS propertyscroll-behavior
CSS propertyscroll-margin
CSS shorthand propertyscroll-padding
CSS shorthand propertyscroll-snap-align
CSS propertyscroll-snap-stop
CSS propertyscroll-snap-type
CSS property::-webkit-scrollbar
pseudo-element- scroll container glossary term
scrollbar
ARIA role
Specifications
Specification |
---|
CSS Scrollbars Styling Module Level 1 |