# Scrollbar

> A thumb and nothing else, in the theme's colours. Opt in for the page or for one block.

Source: https://ngwr.dev/guides/scrollbar  
Kind: Guide, Core  
Added in v15.7

## What it is

No track, no arrows, no corner box. Scrolling, keyboard and touch stay native: only the paint changes.

## Opt in

Loading the theme emits no scrollbar rule. Include the mixin where you want one.

At the stylesheet root it covers the whole page. The rules sit at zero specificity, so any rule of yours wins.

```scss
// styles.scss
@use 'ngwr/theme' as wr;

@include wr.scrollbar;
```

Inside a rule it styles that element's own scrollbars only.

```scss
@use 'ngwr/theme' as wr;

.panel {
  max-height: 20rem;
  overflow: auto;

  @include wr.scrollbar;
}
```

`wr-virtual-scroll` and `wr-marquee` include it on their own viewport, so they look the same without the page-wide opt-in.

## Tokens

Declared on `:root` by the theme.

| Token | Default | Use |
| --- | --- | --- |
| `--wr-scrollbar-size` | `0.625rem` | Width of a vertical bar, height of a horizontal one |
| `--wr-scrollbar-thumb` | `color-mix(in srgb, var(--wr-color-on-surface) 20%, transparent)` | The thumb at rest |
| `--wr-scrollbar-thumb-hover` | `color-mix(in srgb, var(--wr-color-on-surface) 35%, transparent)` | The thumb under the pointer |

## Per scheme

A colour that differs between light and dark is one `light-dark()` value.

```scss
:root {
  --wr-scrollbar-thumb: light-dark(rgb(0 0 0 / 25%), rgb(255 255 255 / 30%));
  --wr-scrollbar-thumb-hover: light-dark(rgb(0 0 0 / 45%), rgb(255 255 255 / 50%));
}
```

## Limits

| Where | What happens |
| --- | --- |
| Firefox | Draws its own thin scrollbar in the thumb colour. No exact width. |
| macOS overlay scrollbars | Show only while scrolling, unless the system setting is "Always". |
| Forced colors | Keep the system scrollbar. |

## See also

- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.
- [Sizing](https://ngwr.dev/guides/tokens/sizing) — Size and round your own controls with ngwr's tokens.
- [Colors](https://ngwr.dev/guides/tokens/colors) — The --wr-color-* tokens, and which one to use for fills, text and borders.
- [Virtual Scroll](https://ngwr.dev/reference/components/virtual-scroll) — A long list of same-height rows that renders only the rows on screen.