W3cubDocs

/CSS

CSS scrollbars styling

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 property
overflow-inline CSS property
overflow-x CSS property
overflow-y CSS property
overflow CSS shorthand property
overflow-clip-margin CSS property
scrollbar-gutter CSS property
scroll-behavior CSS property
scroll-margin CSS shorthand property
scroll-padding CSS shorthand property
scroll-snap-align CSS property
scroll-snap-stop CSS property
scroll-snap-type CSS property
::-webkit-scrollbar pseudo-element
scroll container glossary term
scrollbar ARIA role

Specifications

Specification
CSS Scrollbars Styling Module Level 1>