Generador de barra de desplazamiento CSS

Propiedades estándar modernas (2023 en adelante)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Compatibilidad de navegadores (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserva el espacio de la barra de desplazamiento incluso cuando no se necesita, evitando saltos en el diseño.

Pseudoelementos de webkit (Chrome, Safari, Edge antiguo)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Un control más detallado. width fija el ancho de la barra de desplazamiento vertical; height fija la altura de la horizontal. Añade ambas para contenedores que pueden desplazarse en cualquier dirección.

Combina los dos enfoques en cascada

Especifica primero las reglas modernas y luego webkit como mejora para los navegadores que interpretan ambas:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox solo respeta las reglas modernas scrollbar-*. Chrome y Safari respetan las reglas de webkit (que anulan las modernas, de modo que el comportamiento es coherente).

scrollbar-gutter evita el desplazamiento del contenido

Sin un espacio reservado, el contenido se reajusta cuando aparece una barra de desplazamiento (habitual en listas dinámicas). Solución:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

El hueco de la barra de desplazamiento se reserva tanto si el contenido se desplaza como si no. both-edges añade un hueco equivalente en el lado opuesto para mantener el contenido visualmente centrado.

Ocultar las barras de desplazamiento por completo

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Ten cuidado: ocultar la barra de desplazamiento impide que los usuarios vean que el contenido se puede desplazar. Úsalo solo con un indicador claro (flechas, puntos de página) o cuando el comportamiento de desplazamiento sea evidente por el contexto (carruseles horizontales, historiales de chat).

Consideraciones en móviles

En iOS y Android, las barras de desplazamiento solo aparecen un instante durante el desplazamiento. Tu CSS de barra personalizada se sigue aplicando, pero es posible que los usuarios no la vean más de un segundo. Diseña en consecuencia: no inviertas demasiado en detalles visuales que apenas se ven.

Accesibilidad

• Contraste: el control frente a la guía debe cumplir un 3:1 para el contraste no textual (WCAG 1.4.11).
• Ancho: las barras de desplazamiento finas pueden ser difíciles de agarrar con el ratón, sobre todo para usuarios con dificultades motoras. El ancho normal es un valor predeterminado más seguro.
• Nunca elimines la barra de desplazamiento en regiones desplazables sin ofrecer otro medio de desplazamiento. Los usuarios que dependen de la barra quedarán bloqueados.