Generador de barras de desplazamiento CSS

Chrome, Safari y Edge estilizan las barras de desplazamiento con la familia de pseudo-elementos ::-webkit-scrollbar: reglas separadas para la pista, el pulgar y el estado hover del pulgar, además de un ancho exacto en píxeles y un border-radius para el pulgar. Firefox ignora todo eso y, en su lugar, lee dos propiedades estándar, scrollbar-width y scrollbar-color, que se incorporaron después a la especificación CSS Scrollbars. No son dos dialectos de la misma funcionalidad: son dos conjuntos de prestaciones distintos, con límites diferentes, y la mayoría de los generadores de barras de desplazamiento disimulan esa diferencia mostrando únicamente el resultado de WebKit. Este no.

Define una sola vez el ancho, el color de pista, el color del pulgar, el color al pasar el ratón y el radio del pulgar, y la herramienta construye dos conjuntos de reglas a partir de las mismas entradas. El bloque de WebKit aplica ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb y su estado :hover a la caja de demostración izquierda, de modo que lo que ves allí es exactamente lo que renderizan Chrome, Safari y Edge: el motor real del navegador, no una superposición simulada. El bloque de Firefox asigna scrollbar-width y scrollbar-color a la caja de demostración derecha usando el motor de ese mismo navegador; por eso la caja solo se ve diferente cuando esta página se abre realmente en Firefox. En un navegador WebKit, esa caja muestra su propia barra de desplazamiento predeterminada, y la herramienta lo advierte en vez de fingir un aspecto de Firefox con píxeles prestados.

El mapeo del ancho es el ejemplo más claro de esa diferencia: scrollbar-width de Firefox solo acepta las palabras clave auto, thin o none, nunca una cifra exacta en píxeles. Este generador traduce con honestidad el ancho que elijas (8px o menos se convierte en thin, cualquier valor mayor se convierte en auto) y muestra la palabra clave resultante junto a tu selección, en lugar de inventar un falso resultado perfecto al píxel en Firefox que no existe. Firefox tampoco permite definir un color de hover independiente, un border-radius propio para el pulgar ni un color de pista que no sea simplemente el segundo valor de scrollbar-color: son limitaciones reales y permanentes de la plataforma, no omisiones de esta herramienta.

Copia el bloque CSS combinado y ambos conjuntos de reglas viajan juntos, cada uno bajo su propio comentario, listos para pegar en una hoja de estilo tal cual. Todo se renderiza y se actualiza en tu propio navegador conforme mueves los controles: sin subidas, sin cuentas, sin llamadas al servidor, y sigue funcionando sin conexión una vez que la página ha cargado.