Categoría: Desarrollo
Generador de barras de desplazamiento CSS
Crea CSS de barras de desplazamiento personalizadas en local, con vista previa
Diseña barras de desplazamiento personalizadas con vista previa en vivo y copia el CSS de scrollbar-color, scrollbar-width y el estilo WebKit. Generado en tu navegador.
Vista previa
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color y scrollbar-width son las propiedades estándar y son las que usan Firefox y las versiones actuales de Chrome. Las reglas ::-webkit- son un prefijo no estándar que se mantiene para Chrome, Edge y Safari antiguos: los dos motores no se verán idénticos.
Tanto la vista previa como el CSS generado se producen en tu navegador.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
El estilo de las barras de desplazamiento está repartido entre dos mecanismos. El módulo CSS Scrollbars Styling te da `scrollbar-color` y `scrollbar-width`: dos propiedades, soporte amplio incluido Firefox y un control deliberadamente limitado. Los pseudoelementos `::-webkit-scrollbar`, más antiguos, dan mucho más, pero son un prefijo no estándar. Este generador emite primero las propiedades estándar y después el bloque WebKit, etiquetado, para que tengas cobertura amplia sin fingir que son lo mismo. No se verán idénticos, y una barra de desplazamiento es un control del que la gente depende, así que la vista previa de aquí se desplaza de verdad en lugar de mostrar un dibujo.
Cómo se usa
- Indica el selector del elemento que quieres estilizar y elige los colores del pulgar, la pista y el hover.
- Elige scrollbar-width y ajusta el ancho y el radio de WebKit.
- Desplaza la vista previa para comprobarlo y copia el CSS.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Las barras personalizadas funcionan en todos los navegadores?
- No de forma idéntica. scrollbar-color y scrollbar-width funcionan en Firefox y en Chrome y Edge actuales; las reglas ::-webkit- cubren Chrome, Edge y Safari antiguos. La herramienta emite ambas, pero los dos motores dibujan las barras de forma distinta y ningún CSS las iguala del todo.
- ¿Qué es scrollbar-color?
- La propiedad estándar que fija los colores del pulgar y de la pista en una sola declaración: primero el pulgar, después la pista. Forma parte del módulo CSS Scrollbars Styling, así que es la versión con la que empezar.
- ¿Por qué incluir CSS de WebKit?
- Porque las propiedades estándar solo exponen el color y un ancho aproximado, y porque las versiones antiguas de WebKit y Blink no las admiten. Las reglas con prefijo añaden tamaño y radio explícitos y cubren esos navegadores.
- ¿Debería ocultar la barra por completo?
- Con cuidado. scrollbar-width: none elimina una pista visible que indica que la zona se desplaza y permite arrastrar por ella, lo que perjudica a quien no usa rueda ni trackpad. Considera una barra fina y con buen contraste.