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 recién disponible (Chrome 121, Firefox 64, Safari 26.2).

Chrome 121Edge 121Safari 26.2Firefox 64

Control estándar de las barras de scroll: reserva el hueco para que el layout no se desplace cuando aparece una barra, hazlas finas y colorea el pulgar y la pista sin 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: Los navegadores sin soporte muestran barras por defecto; no hace falta protección.

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

Prompt

Estiliza las barras de scroll solo con las propiedades estándar: `scrollbar-gutter: stable` en los contenedores con scroll y en `html` para evitar saltos de layout, `scrollbar-width: thin` para paneles compactos, `scrollbar-color: <pulgar> <pista>` para el tema. No uses reglas `::-webkit-scrollbar`; no son estándar y ahora se ignoran cuando las propiedades estándar están definidas.