Barra de desplazamiento con CSS: color y grosor estándar

La barra de desplazamiento de una caja con overflow: auto sale con el estilo del sistema, que a veces desentona con el diseño. Hay dos propiedades estándar para cambiarle el color y el grosor, y una forma vieja con prefijo que todavía se ve en muchos tutoriales. Primero, lo que sí conviene.

La forma estándar

<ul class="lista"><li>Pedido 001</li><li>Pedido 002</li><li>Pedido 003</li><li>Pedido 004</li><li>Pedido 005</li><li>Pedido 006</li><li>Pedido 007</li><li>Pedido 008</li><li>Pedido 009</li><li>Pedido 010</li><li>Pedido 011</li><li>Pedido 012</li><li>Pedido 013</li><li>Pedido 014</li><li>Pedido 015</li><li>Pedido 016</li><li>Pedido 017</li><li>Pedido 018</li><li>Pedido 019</li><li>Pedido 020</li></ul>

body { font-family: system-ui, sans-serif; }
.lista {
  height: 160px;
  width: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #d5dde6;
  border-radius: 8px;
  /* el estándar: */
  scrollbar-width: thin;              /* auto, thin o none */
  scrollbar-color: #1e64af #eef3f9;   /* el pulgar y el carril */
}
.lista li { list-style: none; padding: 6px 0; border-bottom: 1px solid #eef3f9; }

ResultadoÁbrelo en el editor →

scrollbar-color recibe dos colores: el del pulgar (la parte que se arrastra) y el del carril.
scrollbar-width acepta auto, thin (más delgada) o none (oculta, pero se puede seguir desplazando). No acepta píxeles: el grosor exacto lo decide el sistema.

Esto es lo que midió cada motor en la caja del ejemplo:

Chromium (Chrome, Edge): scrollbar-color = rgb(30, 100, 175) rgb(238, 243, 249); la barra ocupa 0 px del ancho de la caja.
Firefox: scrollbar-color = rgb(30, 100, 175) rgb(238, 243, 249); la barra ocupa 0 px del ancho de la caja.
WebKit (Safari): scrollbar-color = (no lo conoce); la barra ocupa 0 px del ancho de la caja.

El WebKit de nuestras pruebas (el motor de Safari 18) todavía no reconocía scrollbar-color: en Safari la barra sale con el estilo del sistema, y ahí es donde entra la alternativa de abajo. Que la barra ocupe 0 px no es un error: en macOS, iOS y Android, y en algunos Linux, las barras «flotan» sobre el contenido y solo aparecen al desplazarse, así que no restan ancho. Con thin en un sistema de barras clásicas (como Windows), la barra ocupa menos.

La alternativa con prefijo: ::-webkit-scrollbar

/* Solo para navegadores que no conocen el estándar */
@supports not (scrollbar-color: auto) {
  .lista::-webkit-scrollbar { width: 8px; }
  .lista::-webkit-scrollbar-track { background: #eef3f9; }
  .lista::-webkit-scrollbar-thumb { background: #1e64af; border-radius: 4px; }
}

Los pseudoelementos ::-webkit-scrollbar permiten más detalle (redondear el pulgar, fijar píxeles), pero no son estándar. En Chrome y Edge, desde que existen las propiedades estándar, si pones las dos cosas gana el estándar. Envolver los prefijos en @supports not deja claro para qué están.

Cuándo no tocarla

Nunca la escondas (scrollbar-width: none) en una caja que la gente necesita recorrer: sin barra, no hay pista de que hay más contenido, y con ratón sin rueda no se puede llegar.
Cuida el contraste entre pulgar y carril: una barra gris clara sobre blanco es casi invisible.
En la página entera, mejor no: la barra del navegador es conocida, y cambiarla rara vez mejora algo.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.