Styling Scrollbars With Modern CSS

Modern CSS can change a scrollbar’s width and colours without a page of browser-specific pseudo-elements. That does not mean a scrollbar needs a redesign.

It is an interface control supplied by the browser and operating system. If I style one, I keep the change small.

The standard properties cover the common case

.scroll-area {
  max-height: 20rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #777 transparent;
}

scrollbar-width accepts auto, thin, or none. The first value in scrollbar-color is the draggable thumb; the second is the track.

none keeps the area scrollable while hiding its scrollbar. I would avoid that for ordinary content. A user should not need to discover overflow by accident.

Contrast matters too. This may technically create a custom scrollbar:

.scroll-area {
  scrollbar-color: #ddd #fff;
}

It may also make the thumb nearly invisible. Subtle is useful only until the control disappears.

Theme the thumb with the rest of the page

:root {
  color-scheme: light dark;
}

.scroll-area {
  scrollbar-color:
    light-dark(#777, #aaa)
    transparent;
}

color-scheme also lets the browser choose suitable defaults. Before adding custom colours, check whether the native dark-mode scrollbar already does the job.

The older pseudo-elements offer more control

You will still see WebKit-prefixed selectors for detailed styling:

.scroll-area::-webkit-scrollbar {
  width: 10px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 999px;
}

.scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

They can be useful for older engines or a design that needs more than the standard API, but they are not the standard syntax. Mixing both approaches also needs testing because support and precedence have changed over time.

Horizontal overflow deserves attention

Code blocks often need horizontal scrolling:

pre {
  overflow-x: auto;
  scrollbar-width: thin;
}

Do not make the bar so small that it becomes difficult to drag. On touch devices it may be overlaid or hidden by the system anyway, so the content should still make its overflow understandable.

My default scrollbar style is the browser default. For a compact component, thin and a clearly visible thumb are usually enough. If the result looks less like a scrollbar, I have probably styled too much.