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 recém disponível (Chrome 121, Firefox 64, Safari 26.2).

Chrome 121Edge 121Safari 26.2Firefox 64

Controle padrão de barras de rolagem: reserve o gutter para o layout não se deslocar quando uma barra aparece, deixe as barras finas, e colora thumb e track sem os hacks de `::-webkit-scrollbar`.

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: Navegadores sem suporte mostram barras padrão; nenhuma proteção necessária.

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

Prompt

Estilize barras de rolagem só com as propriedades padrão: `scrollbar-gutter: stable` nos containers de scroll e em `html` para evitar deslocamento de layout, `scrollbar-width: thin` em painéis compactos, `scrollbar-color: <thumb> <track>` para o tema. Não use regras `::-webkit-scrollbar`; são não padronizadas e agora são ignoradas quando as propriedades padrão estão definidas.