Estilos de la barra de desplazamiento con ::-webkit-scrollbar
Personalice el aspecto de la barra de desplazamiento mediante pseudoelementos webkit y la propiedad scrollbar-color.
Estilos de la barra de desplazamiento con ::-webkit-scrollbar es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Descripción general de la personalización de barras de desplazamiento
Los navegadores muestran barras de desplazamiento predeterminadas que varían según el sistema operativo. CSS permite personalizar su apariencia mediante pseudoelementos no estándar de WebKit y las propiedades estándar modernas.
::-webkit-scrollbar
El pseudoelemento raíz de toda la barra de desplazamiento. Establezca la anchura (vertical) y la altura (horizontal):
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
La pista es el canal de fondo por el que se desliza el control:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
El control es el indicador de desplazamiento que se puede arrastrar:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barra de desplazamiento personalizada completa
Una implementación completa de una barra de desplazamiento personalizada:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Estándar moderno: scrollbar-color
scrollbar-color es la propiedad estandarizada compatible con Firefox. Establece los colores del control y de la pista en una sola declaración:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Estándar moderno: scrollbar-width
scrollbar-width controla el tamaño de la barra de desplazamiento mediante valores de palabra clave:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Personalización de barras entre navegadores
Para lograr una compatibilidad completa entre navegadores, use ambos enfoques:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Ocultar barras de desplazamiento sin impedir el desplazamiento
Haga que un elemento sea desplazable, pero oculte visualmente la barra de desplazamiento:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barras de desplazamiento en modo oscuro
Use la propiedad CSS color-scheme para obtener barras de desplazamiento oscuras nativas del sistema operativo sin aplicar estilos personalizados:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Recordatorio sobre accesibilidad
No haga que las barras de desplazamiento sean demasiado pequeñas o invisibles de una forma que dificulte descubrir cómo desplazarse. Las barras ocultas son aceptables en diseños táctiles, pero pueden resultar confusas en equipos de escritorio.
Comprobación rápida
¿Qué propiedad CSS estandarizada establece los colores de las barras de desplazamiento y es compatible con Firefox?
Resumen
Personalice las barras de desplazamiento con los pseudoelementos ::-webkit-scrollbar (WebKit) y las propiedades estándar scrollbar-color/scrollbar-width (Firefox y navegadores modernos). Use ambos enfoques para lograr una compatibilidad completa entre navegadores. Use scrollbar-width: none junto con el equivalente de WebKit para ocultar las barras de desplazamiento sin perder la funcionalidad de desplazamiento.
Preguntas frecuentes
¿La lección «Estilos de la barra de desplazamiento con ::-webkit-scrollbar» es gratis?
Sí — el texto completo de «Estilos de la barra de desplazamiento con ::-webkit-scrollbar» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estilos de la barra de desplazamiento con ::-webkit-scrollbar»?
Personalice el aspecto de la barra de desplazamiento mediante pseudoelementos webkit y la propiedad scrollbar-color. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Estilos de la barra de desplazamiento con ::-webkit-scrollbar»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- overflow: hidden, scroll, auto y clip
- scroll-behavior: smooth
- scroll-snap-type y scroll-snap-align
- Estilos de la barra de desplazamiento con ::-webkit-scrollbar