Make scrollbars thin and quiet

Two lines of CSS make a scrollbar thin and quiet.

Rauno Freiberg@raunofreiberg
How to make scrollbars not suck scrollbar-width: thin; scrollbar-color: gray transparent;
Apr 25, 2026View on X ↗
Rauno Freiberg@raunofreiberg
scrollbar-width: thin + extra padding for sheets
Aug 28, 2026View on X ↗

On macOS with overlay scrollbars, bars only show while you scroll.

1 · The bar itself

Scroll each list. macOS may hide bars until you scroll.

Default scrollbarBad
scrollbar-width: autoBar0px
Thin and quietGood
scrollbar-width: thinBar0px
.list {
  scrollbar-width: thin;
  scrollbar-color: gray transparent;   /* thumb, track */
}

2 · Sheets need padding

Scroll the sheet and watch the gap beside the text.

Hugs the textBad
padding-inline-end: 0
Own gutterGood
padding-inline-end: 14px
.sheet-body {
  scrollbar-width: thin;
  scrollbar-gutter: stable;     /* reserve the bar's space up front */
  padding-inline-end: 14px;     /* and keep it off the text */
}

Why it matters, pros and cons

Why it matters

Default bars are chunky and pull the eye. A thin gray thumb tells you there is more, nothing else.

Pros

  • Two declarations, no JavaScript and no custom thumb to maintain.
  • Keeps real scrolling: drag, keyboard and assistive tech all still work.
  • A padded gutter stops the bar from sitting on top of the last letters.

Cons

  • Overlay scrollbars on macOS and phones look the same either way.
  • Thin bars are smaller targets to grab with a mouse.
  • Older Safari ignores scrollbar-color, so the thumb stays default there.