Custom Scrollbar Styling: Anatomy, Selectors, and Real-World Examples

Scrollbars are easy to overlook, but they are a functional part of the interface. The default browser scrollbar often clashes with a carefully designed page. Fortunately, CSS offers the tools to bring the scrollbar in line with the rest of the UI.

Understanding the Scrollbar's Structure

Before writing any styles, it helps to know the two key parts of a scrollbar:

  1. The track, which is the background area the bar slides over.
  2. The thumb, which is the draggable part the user interacts with.
A webpage wireframe with a scrollbar highlighting the scrollbar thumb and scrollbar track.

To target a scrollbar, CSS provides vendor-prefixed pseudo-elements. For the main page scrollbar, the selector is applied directly to the HTML element:

html::-webkit-scrollbar {
  /* Style away! */
}

For a scrollable container created with overflow: scroll, the same pseudo-elements are used on that specific element:

.element::-webkit-scrollbar {
  /* Style away! */
}

The full scrollbar can be styled with ::-webkit-scrollbar, allowing you to set a fixed width, background color, border radius, and more. For separate control over the two main parts, there are dedicated selectors:

  • ::-webkit-scrollbar-thumb for the draggable portion.
  • ::-webkit-scrollbar-track for the background area.

Subtle and Refined Scrollbars

A custom scrollbar does not have to be flashy. A simple change, such as adjusting the thumb's color to match the site's accent or giving the track a soft background, can make the interface feel more cohesive and polished. These minimal tweaks often deliver the best balance between aesthetics and usability, letting the scrollbar support the design without drawing attention to itself.

Creative and Unconventional Scrollbars

There is also room to experiment. More elaborate scrollbar styles can turn a standard UI element into a memorable visual detail. These designs may not fit every project, but they demonstrate the creative range of what is possible when the standard look is replaced with something unique.

The idea can be taken even further with custom graphics: a train as the thumb and tracks as the underlying track shows how far the styling can go.