: The background area where the thumb moves. ::-webkit-scrollbar-thumb : The actual draggable handle. Example Implementation: Scrollbar styling | CSS and UI - Chrome for Developers

The CSS Scrollbars Styling Module Level 1 introduced two primary properties that are now the standard for modern browsers like Firefox and newer versions of Chrome and Edge.

: Sets the colors for the thumb (the draggable part) and the track (the background) in a single declaration. Example Implementation:

For older versions of Chrome, Safari, and Edge (WebKit/Blink engines), developers use pseudo-elements. These offer much deeper customization, such as adding gradients or border-radii, which the standard properties currently lack. : The entire scrollbar area.

Custom scrollbar styling in CSS has transitioned from a fragmented landscape of browser-specific "hacks" to a more standardized approach. While modern browsers now support standard properties, achieving a truly consistent look across all platforms still requires a combination of both new and legacy CSS methods. 1. The Modern Standard (W3C)

: Controls the thickness of the scrollbar. Accepted values are auto , thin , and none .

/* Standard syntax for modern browsers */ .scroller scrollbar-width: thin; scrollbar-color: #3b82f6 #f1f5f9; /* thumb track */ Use code with caution. 2. The Legacy Approach (Webkit)