Durante años, la personalización de las barras de desplazamiento ha sido uno de los mayores desafíos estéticos en el desarrollo web. Lograr una apariencia consistente entre navegadores obligaba a los desarrolladores a recurrir a selectores no estándar como ::-webkit-scrollbar, que carecía de soporte en Firefox y generaban un código redundante y difícil de mantener.

Con la llegada de scrollbar-color al estado Baseline Newly Available, finalmente contamos con una solución estandarizada y compatible con todos los motores de renderizado modernos (Chromium, Firefox y Safari).

¿Qué es scrollbar-color?

Esta propiedad permite definir de forma directa los colores de los dos elementos principales de una barra de desplazamiento: el deslizador (thumb) y la pista (track). La sintaxis es minimalista y eficiente:

scrollbar-color: <color-del-deslizador> <color-de-la-pista>;

A diferencia de los métodos antiguos, no es necesario definir múltiples pseudo-elementos para cambios básicos de color.

Implementación práctica

1. Aplicación global en el sitio

Para establecer una identidad visual coherente en toda la aplicación, podemos aplicar la propiedad directamente en el elemento raíz:

:root {
  /* Deslizador azul intenso con pista gris claro */
  scrollbar-color: #0056b3 #e9ecef;
}

2. Personalización de componentes específicos

Si tenemos un área de contenido específica, como una terminal de comandos o un panel lateral, podemos limitar el estilo solo a ese contenedor:

.consola-sistema {
  overflow-y: auto;
  scrollbar-color: #32cd32 #1a1a1a;
}

Control de dimensiones con scrollbar-width

La estandarización no se detiene en el color. La propiedad scrollbar-width complementa este control permitiendo ajustar el grosor sin necesidad de cálculos complejos de píxeles:

.panel-lectura {
  scrollbar-width: thin; /* Opciones: auto, thin, none */
  scrollbar-color: #6c757d transparent;
}

El valor thin es ideal para interfaces modernas y minimalistas donde una barra de desplazamiento gruesa podría romper la jerarquía visual.

Estrategia de compatibilidad heredada

Aunque el soporte moderno es amplio, es posible que necesites dar soporte a versiones muy antiguas de navegadores basados en Webkit. En esos casos, se recomienda una implementación progresiva:

/* Estándar moderno */
.scroller-moderno {
  scrollbar-color: #ffa500 #333;
  scrollbar-width: auto;
}

/* Soporte para navegadores antiguos (Legacy) */
@supports not (scrollbar-color: auto) {
  .scroller-moderno::-webkit-scrollbar {
    width: 12px;
  }
  .scroller-moderno::-webkit-scrollbar-thumb {
    background-color: #ffa500;
    border-radius: 6px;
  }
  .scroller-moderno::-webkit-scrollbar-track {
    background-color: #333;
  }
}

Hacia una web más predecible

La adopción de scrollbar-color como estándar Baseline marca un hito en la madurez de CSS. Al igual que sucedió con aspect-ratio o las consultas de contenedor (Container Queries), el control de los detalles de la interfaz de usuario está dejando de depender de implementaciones experimentales de los fabricantes para convertirse en herramientas robustas y universales.

Esto permite que los sistemas de diseño (Design Systems) sean más cerrados y consistentes, garentizando que la experiencia del usuario sea idéntica sin importar el software que utilice para navegar.