Scrollbars in CSS

There is a standard way now, and the old vendor pseudo-elements still do more.

.panel {
  overflow-y: auto;
  max-block-size: 24rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-gutter: stable both-edges;
}

.panel::-webkit-scrollbar { inline-size: 8px; }

.panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

How it works

1. scrollbar-width and scrollbar-color are the standard, two-property answer.
2. scrollbar-gutter: stable reserves the space so content does not jump.
3. Never hide a scrollbar on a region that only scrolls with a wheel.

Keywords and builtins used here

• background
• panel
• px
• rem

The run, in numbers

Lines

16

Characters to type

342

Tokens

67

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 2 of 3 in Text & scrollers, step 8 of 13 in Styling components.

← Previous Next →