Personaliza el color o el grosor de una barra de desplazamiento

Puedes personalizar el aspecto de las barras de desplazamiento con las propiedades de CSS estándar scrollbar-color y scrollbar-width.

• scrollbar-color: Acepta dos valores <color>. El primero se aplica al control deslizante (la parte móvil) y el segundo, a la pista (el fondo fijo).
• scrollbar-width: Acepta auto (predeterminado), thin (una variante más delgada) o none (oculta la barra de desplazamiento por completo, pero mantiene la capacidad de desplazamiento).

Aplica scrollbar-color y scrollbar-width

OBLIGATORIO: Usa scrollbar-color y scrollbar-width en el contenedor desplazable.

Cuando uses scrollbar-color, utiliza variables de CSS para mantener separados los colores del control deslizante y de la barra, lo que mejorará la legibilidad y el mantenimiento (especialmente cuando uses resguardos).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Estrategias de resguardo

Resguardos y compatibilidad de navegadores con scrollbar-color

Esta función es una mejora progresiva y no siempre requiere resguardos.

Si el diseño es importante y el objetivo de Baseline del usuario es "Baseline Widely Available" o anterior, DEBERÍAS incluir los seudoelementos ::-webkit-scrollbar no estándar como resguardos.

Une los resguardos heredados en un bloque @supports not (scrollbar-color: auto) para evitar conflictos entre las propiedades estándar y los selectores de WebKit heredados en los navegadores que admiten ambos de forma nativa.

Si usas propiedades personalizadas para definir colores, estos se aplicarán en cascada a los selectores de WebKit heredados automáticamente. NO es necesario que los dupliques.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}