scrollbar-gutter, scrollbar-width, scrollbar-color

scrollbar-gutter Baseline 2024 (Chrome 94, Safari 18.2, Firefox 97). scrollbar-width Baseline 2024 (Safari 18.2). scrollbar-color neu verfügbar (Chrome 121, Firefox 64, Safari 26.2).

Chrome 121Edge 121Safari 26.2Firefox 64

Standardisierte Scrollbar-Kontrolle: reserviere die Rinne, damit das Layout nicht springt, wenn ein Scrollbalken erscheint, mache Scrollbalken dünn und färbe Daumen und Spur ohne `::-webkit-scrollbar`-Hacks.

Scroll me. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS

.fx-024 {
  height: 110px;
  width: 280px;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #2563eb #e5e7eb;
  padding: 8px;
  border: 1px solid #ddd;
  font-family: system-ui
}

HTML

<div class="fx-024"><p>Scroll me. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>

Fallback: Browser ohne Unterstützung zeigen Standard-Scrollbalken; keine Absicherung nötig.

Quelle: webkit.org/blog/17640/webkit-features-for-safari-26-2/ and https://web.dev/baseline/2026

Prompt

Style Scrollbalken nur mit den Standard-Properties: `scrollbar-gutter: stable` auf Scroll-Containern und `html` gegen Layoutsprünge, `scrollbar-width: thin` für kompakte Panels, `scrollbar-color: <thumb> <track>` für das Theming. Nutze keine `::-webkit-scrollbar`-Regeln; sie sind nicht standardisiert und werden inzwischen ignoriert, wenn die Standard-Properties gesetzt sind.