La barra de desplazamiento gris predeterminada del navegador funciona como una tarjeta de presentación hecha en un creador de sitios web gratuito: cumple su función, pero deja una impresión mediocre. Se nota especialmente cuando todo el sitio tiene los píxeles perfectos, las fuentes están cuidadosamente elegidas, los colores están pulidos y, de repente, aparece esa barra angular de la época de Internet Explorer a la derecha.

Los desarrolladores suelen evitar el tema. No porque sea difícil, cuatro líneas de CSS resuelven el problema. Más bien, los mitos se interponen: «solo funciona en Chrome», «los usuarios no lo notan», «es un truco, no una funcionalidad para producción».

En realidad, el estándar del W3C cubre lo básico con dos propiedades, y los pseudoelementos de WebKit le dan control sobre cada detalle, desde el redondeo hasta los degradados. He recopilado ambos enfoques en un solo tutorial: desde la especificación hasta el código listo para producción y compatible con todos los navegadores, que no le dará vergüenza poner en producción.

💡 Resumen rápido:

• Configure la barra de desplazamiento usando scrollbar-width y scrollbar-color: dos líneas, compatibilidad total entre navegadores, sin prefijos.
• Domine ::-webkit-scrollbar y sus descendientes para un control detallado de la pista, el pulgar y las esquinas.
• Construya una solución compatible con todos los navegadores: el estándar para Firefox, pseudoelementos para Chrome/Safari/Edge, sin conflictos.
• Examine los errores comunes: especificidad, accesibilidad, botones faltantes, trampas en navegadores móviles.

Por qué estilizar la barra de desplazamiento

El primer y principal argumento es la cohesión visual. Imagine una página de aterrizaje oscura con acentos neón y una barra de desplazamiento blanca brillante a la derecha. O un sitio minimalista claro donde la barra de desplazamiento es el único elemento que rompe la paleta de colores. Técnicamente no es un error, pero se ve inacabado.

El segundo punto es la marca. Una barra de desplazamiento coloreada se convierte en parte del lenguaje visual: un pulgar verde para un servicio de entrega de comida saludable, naranja para una plataforma de reservas. Un pequeño detalle que refuerza la asociación sin necesidad de banners adicionales ni ventanas emergentes.

Tercero, la gestión de la atención. Una barra de desplazamiento delgada y semitransparente no desvía la atención del contenido. En páginas de aterrizaje largas, una barra estrecha no consume visualmente píxeles valiosos de ancho, y en diseños móviles con márgenes laterales, cada píxel cuenta.

Y el punto clave: esto no es un truco para frikis. Las propiedades scrollbar-width y scrollbar-color forman parte de la especificación CSS Scrollbars Styling Module Level 1 y son compatibles con todos los navegadores actuales. Según los datos de Can I Use de junio de 2026, la cobertura de las propiedades estándar supera el 95% de los usuarios, la era de los prefijos de proveedor para las barras de desplazamiento ha terminado.

Enfoque estándar: scrollbar-width y scrollbar-color

El método más simple y fiable. Dos propiedades sin prefijos, sintaxis clara, funciona en Firefox, Chrome, Edge y Safari.

Sintaxis básica

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

El primer valor en scrollbar-color es el color del pulgar, el segundo es el color de la pista. La propiedad scrollbar-width acepta tres valores:

• auto, ancho estándar (alrededor de 17px en Windows, 15px en macOS con ratón);
• thin, barra de desplazamiento delgada (aproximadamente 8px);
• none, oculta la barra de desplazamiento por completo (el desplazamiento sigue funcionando, pero el usuario puede no darse cuenta de que el contenido se desplaza, úselo con precaución).

Ejemplo para tema oscuro

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Resultado: una pista oscura que coincide con el color de fondo y un pulgar gris. Nada rompe la paleta, dos líneas de código.

Limitaciones del estándar

La especificación es intencionadamente minimalista: no puede establecer radio de borde, sombras, degradados ni efectos al pasar el cursor. Esto es un compromiso entre la personalización y la preservación de la usabilidad, una barra de desplazamiento excesivamente no estándar rompe el modelo de interacción familiar. Si el conjunto estándar no es suficiente, conecte los pseudoelementos de WebKit.

Ajuste fino mediante::-webkit-scrollbar

El conjunto de pseudoelementos ::-webkit-scrollbar-* no forma parte del estándar del W3C, pero es compatible con los navegadores WebKit y Blink: Chrome, Edge, Safari, Opera, Brave, Arc. La cobertura, según las estadísticas de Can I Use, comprende la gran mayoría de los usuarios de escritorio.

Arquitectura de la barra de desplazamiento en WebKit

Una barra de desplazamiento del navegador consta de siete partes, cada una con su propio pseudoelemento:

En la práctica, la gran mayoría de las tareas se resuelven con tres: scrollbar, track y thumb. El resto son para soluciones de diseño específicas.

Ejemplo: barra de desplazamiento pulcra para un blog

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Seis píxeles de ancho, pista transparente (invisible sin desplazamiento), pulgar redondeado con oscurecimiento al pasar el cursor. La barra de desplazamiento no grita su presencia, pero se ve moderna.

Ejemplo con degradado para una página de aterrizaje

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

Degradado vertical en el pulgar, pista oscura, borde delgado para separarlo del fondo. Tres líneas adicionales a la base, la página se siente diferente.

Ocultar la barra de desplazamiento sin perder el desplazamiento

Técnica clásica para ventanas modales y menús de hamburguesa:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

El contenedor sigue siendo desplazable, pero la barra desaparece tanto en Firefox (scrollbar-width: none) como en navegadores WebKit (display: none en el propio ::-webkit-scrollbar).

Solución compatible con todos los navegadores

Combine el estándar y los pseudoelementos en un solo bloque, la cobertura es casi completa:

1
/* W3C standard — Firefox, modern Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* WebKit pseudo-elements — detailed styling for Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

El orden importa: primero las propiedades estándar, luego los pseudoelementos. Los navegadores con soporte estándar aplican scrollbar-color e ignoran ::-webkit-scrollbar-*, como exige la especificación. Los navegadores sin soporte estándar utilizan los pseudoelementos. No surge ningún conflicto.

Dónde insertar el código

Tres opciones, de simple a flexible:

• Globalmente en el archivo style.css del tema. Adecuado si el estilo de la barra de desplazamiento es el mismo para todo el sitio. Inconveniente: los cambios se perderán al actualizar el tema.
• En la sección «Estilos adicionales» del personalizador. Ruta: Apariencia → Personalizar → Estilos adicionales. Método seguro para WordPress: los estilos residen en la configuración del tema y no se restablecen al actualizar.
• A través de un plugin como Code Snippets. Si necesita establecer específicamente la barra de desplazamiento para ciertas páginas mediante clases CSS.

En un tema hijo, los estilos se conectan a través de un archivo separado mediante wp_enqueue_scripts con el gancho wp_head.

Errores comunes al estilizar

Compatibilidad entre navegadores olvidada. Solo establece ::-webkit-scrollbar, la barra predeterminada permanece en Firefox. Agregue siempre scrollbar-width y scrollbar-color como un par arriba en el código.

Barra de desplazamiento demasiado delgada. Con un ancho de 2-3px en ::-webkit-scrollbar, hacer clic en el pulgar con el ratón se convierte en una tarea de motricidad fina. Especialmente crítico en portátiles sin ratón externo. El ancho mínimo cómodo es de 6px.

Contraste cero. Un pulgar gris sobre una pista gris se funde en una sola mancha. El contraste de color mínimo entre el pulgar y la pista es de 3:1, un requisito de WCAG 2.1 AA para elementos de interfaz.

Sobrescribir todos los pseudoelementos innecesariamente. El código se infla, efecto cero. En la mayoría de los casos, scrollbar, track y thumb son suficientes. Toque los botones (button) y la esquina (corner) solo si el diseño realmente lo requiere.

Fuga de estilo a todo el cuerpo. Establecer en * o html sin restricciones estiliza también las barras de desplazamiento internas: campos de texto, bloques de código, listas desplegables. Para las vistas previas de código esto es casi siempre innecesario. Utilice selectores de clase: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Preguntas frecuentes

¿Funciona el estilizado de la barra de desplazamiento en dispositivos móviles?

No, en los navegadores móviles la barra de desplazamiento no se muestra de forma estática, solo aparece durante el desplazamiento y está controlada por el sistema operativo. El estilizado CSS no se aplica en iOS y Android. Pero esto no es un problema: en móviles la barra de desplazamiento no es un elemento de interfaz permanente. Verificado en iOS 18 Safari y Android 15 Chrome, los estilos personalizados se ignoran, se utiliza el indicador del sistema. En tabletas con teclado externo, la barra de desplazamiento puede mostrarse permanentemente y los estilos funcionan.

¿Cómo estilizar la barra de desplazamiento horizontal por separado de la vertical?

A través de pseudoelementos con prefijo de dirección: ::-webkit-scrollbar-horizontal y ::-webkit-scrollbar-vertical. En la práctica rara vez se usan, el soporte es peor que para los pseudoelementos principales. Es más fiable adjuntar estilos a un contenedor específico con el tipo de desplazamiento necesario mediante un selector de clase. Para el desplazamiento horizontal dentro de un bloque de código: .code-block::-webkit-scrollbar { height: 4px; } establece la altura de la barra de desplazamiento horizontal, y .code-block::-webkit-scrollbar-thumb { background: #666; } estiliza el pulgar. Las propiedades estándar scrollbar-width y scrollbar-color funcionan igual para ambas direcciones.

¿Se puede animar la barra de desplazamiento al pasar el cursor?

Sí, a través de transition en ::-webkit-scrollbar-thumb. Pero el soporte de transición en pseudoelementos es incompleto: Chrome y Edge funcionan, Safari puede fallar. Por eso, más a menudo se usa el cambio de color mediante :hover sin animación, es más fiable y se ve limpio. Variante funcional: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } cambia suavemente el color del pulgar. No aplique transición a width: cambiar el ancho de la barra de desplazamiento al pasar el cursor desplaza el contenido e irrita.

¿Cómo estilizar la barra de desplazamiento dentro de un bloque específico, no de toda la página?

Use un selector compuesto: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Para las propiedades estándar: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Funciona para cualquier contenedor con overflow-y: auto o overflow-y: scroll. No use el selector * para la barra de desplazamiento, afectará a los campos de texto y listas desplegables.

¿Es obligatorio duplicar estilos para ::-webkit-scrollbar y las propiedades estándar?

Sí, si se necesita compatibilidad entre navegadores. Firefox solo usa scrollbar-width y scrollbar-color, ignorando los pseudoelementos. Chrome y Edge desde la versión 121 soportan ambos mecanismos, pero aplican las propiedades estándar con prioridad, los pseudoelementos en ellos funcionan como respaldo para versiones anteriores. Cuatro líneas de código (dos para el estándar, dos para WebKit) cubren todos los navegadores sin conflictos.

Vale la pena estilizar la barra de desplazamiento en 2026

Definitivamente sí, si está construyendo un sitio público. Dos líneas de CSS estándar le dan una barra de desplazamiento pulcra que no rompe el diseño y no requiere polyfills. Para páginas de aterrizaje y proyectos de marca, los pseudoelementos de WebKit añaden individualidad sin perjudicar el rendimiento.

La regla principal es no exagerar. La barra de desplazamiento sigue siendo un elemento funcional de la interfaz, no un lienzo para experimentos. Ancho mínimo de 6px, contraste no inferior a 3:1, sin animaciones de ancho, y el usuario ni siquiera notará que la barra de desplazamiento está estilizada. Y esa es precisamente la señal de un buen trabajo.

Si el sitio está en WordPress, ponga el código en los estilos adicionales del personalizador, le llevará un minuto. El resultado permanecerá con usted a través de las actualizaciones del tema y agradará la vista de todos los que desplacen la página hasta el final.