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 newly available (Chrome 121, Firefox 64, Safari 26.2).

Chrome 121Edge 121Safari 26.2Firefox 64

Standard scrollbar control: reserve the gutter so layout does not shift when a scrollbar appears, make scrollbars thin, and color thumb and track without `::-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: Unsupported browsers show default scrollbars; no guard needed.

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

Prompt

Style scrollbars with the standard properties only: `scrollbar-gutter: stable` on scroll containers and `html` to prevent layout shift, `scrollbar-width: thin` for compact panels, `scrollbar-color: <thumb> <track>` for theming. Do not use `::-webkit-scrollbar` rules; they are non-standard and now ignored when the standard properties are set.