# CSS Scrollbar Styling

Styling scrollbars has historically been fragmented between different browser engines. However, a new standard specification is emerging that simplifies this process, while legacy methods are still needed for full cross-browser support.

## 1. The Standard (Firefox & Modern Browsers)

The modern standard (CSS Scrollbars Module Level 1) provides a simple way to style scrollbars using two properties. This is currently supported in Firefox and Chromium-based browsers (Chrome 121+).

*   **`scrollbar-width`**: Controls the width of the scrollbar.
    *   `auto`: Default width.
    *   `thin`: A thinner scrollbar.
    *   `none`: Hides the scrollbar (but the element remains scrollable).
*   **`scrollbar-color`**: Sets the color of the scrollbar thumb and track.
    *   Syntax: `scrollbar-color: <thumb-color> <track-color>;`

```css
/* Modern Syntax */
.scroller {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1; /* Thumb Track */
}
```

## 2. The Legacy Way (Webkit - Chrome, Edge, Safari)

For older versions of Chrome, Edge, and Safari, you must use the non-standard `::-webkit-scrollbar` pseudo-elements. These offer much more granular control but are more verbose.

*   `::-webkit-scrollbar`: The scrollbar itself (width/height).
*   `::-webkit-scrollbar-track`: The track (background).
*   `::-webkit-scrollbar-thumb`: The draggable handle.
*   `::-webkit-scrollbar-thumb:hover`: The handle on hover.

```css
/* Legacy Webkit Syntax */
.scroller::-webkit-scrollbar {
  width: 10px; /* Width of vertical scrollbar */
  height: 10px; /* Height of horizontal scrollbar */
}

.scroller::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

.scroller::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 5px;
}

.scroller::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
```

## 3. Cross-Browser Strategy

To support all browsers, you should combine both methods.

```css
.scroller {
  /* Firefox & Modern Chrome/Edge */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Legacy Webkit (Chrome, Safari, Edge) */
.scroller::-webkit-scrollbar {
  width: 8px;
}
.scroller::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scroller::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
  border: 2px solid #f1f1f1; /* Creates padding around thumb */
}
```

## 4. Hiding Scrollbars

Sometimes you want an element to be scrollable but without a visible scrollbar.

```css
.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none; 
  
  /* IE 10+ */
  -ms-overflow-style: none;  
}

/* Webkit */
.hide-scrollbar::-webkit-scrollbar { 
  display: none; 
}
```

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]