Generador de barra de desplazamiento CSS
Sustituya la barra de desplazamiento gris predeterminada por una versión acorde con los colores de su sitio: ajuste el ancho, los colores y el redondeo, previsualice en directo y copie el código CSS listo para usar. Todo se calcula en local en su navegador.
La vista previa usa las propiedades ::-webkit-scrollbar (Chrome, Edge, Safari) y scrollbar-color (Firefox); el resultado puede variar ligeramente según su navegador.
Cómo funciona
No existe una única propiedad CSS estándar para dar estilo a una barra de desplazamiento: los navegadores basados en Chromium (Chrome, Edge, Safari) usan los pseudoelementos ::-webkit-scrollbar, mientras que Firefox usa las propiedades scrollbar-width y scrollbar-color. Esta herramienta genera ambos a la vez, en un bloque CSS acotado a una clase, para que el resultado se aplique solo al contenedor que usted elija y no a toda la página.
¿Cómo aplico este código a mi propio contenedor?
Copie el CSS generado, cambie el nombre de la clase byteryo-custom-scrollbar según su convención de nomenclatura y añada esa clase al elemento HTML cuya barra de desplazamiento desee personalizar (por ejemplo, un div con overflow: auto o overflow: scroll).
¿Se verá igual en todos los navegadores?
No: Firefox solo admite el ancho (fino o automático) y los colores mediante scrollbar-color, sin redondeo ni color independiente al pasar el ratón, mientras que los navegadores basados en Chromium permiten un control más fino. El código generado ofrece el mejor resultado posible en cada motor, pero es normal que haya una ligera diferencia visual entre navegadores.
El código CSS se compone por completo en su navegador: no se envía ningún dato a un servidor durante la generación.