a11y.skipToMainContent
1

CSS Scrollbar Styler

Diseño de barras de desplazamiento personalizadas visualmente — ancho, pista y colores pulgares, estado de buceador y radio — luego copiar WebKit y Firefox CSS.

Track radius (optional)

The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge, and Safari. Firefox does not support them and instead uses thescrollbar-width / scrollbar-color fallback included in the output.

Preview (scroll the box)

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Scrollbar Styler

  1. Establece el ancho de la barra de desplazamiento y los colores de la pista, el pulgar y el pulgar.
  2. Elige una frontera con el pulgar y opcionalmente redondea la pista.
  3. Desplaza la casilla de vista previa en vivo para comprobar la apariencia en un navegador WebKit.
  4. Haga clic en Copiar CSS para copiar las reglas de WebKit y Firefox.

¿Cómo se llama?

Esta herramienta construye el CSS para una barra de desplazamiento personalizada de controles visuales simples. Establece el ancho de la barra de desplazamiento, los colores de la pista y el pulgar, el color de la manguera del pulgar, el código de acceso transfronterizo-radius identificado/code confidencial, y una pista redondeada opcional. Una actualización de caja de previsualización desplazable en vivo para que pueda ver el resultado antes de copiar. La salida incluye tanto el bloque de pseudo-elemento WebKit (complemento asignado::-webkit-scrollbar observado/código de propiedad y su pista, pulgar, y partes de pulgar) usados por Chrome, Edge, y Safari, y un ■code contactos-width buscado/código de propiedad / Identificado clavescrollbar-color buscado/código de confianza caída que Firefox entiende. Todo funciona en su navegador
Advertisement

FAQ

¿Por qué la vista de vista previa no se estilo en Firefox?
Firefox no admite los pseudoelementos WebKit ::-webkit-scrollbar. En su lugar utiliza la barra de desplazamiento-anchura y la barra de desplazamiento-color retroceso, que sólo permite un ancho delgado o auto y un par de colores pulgar/track, ambos incluidos en el CSS copiado.
¿Cómo puedo aplicar el CSS copiado a un elemento específico?
La salida apunta a una clase .scrollbox. Agregue esa clase al elemento pergamino que desea estilo, o reemplace .scrollbox con su propio selector antes de pegarlo en su hoja de estilo.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Scrollbar Styler on Wikipedia·Developer Tools on Wikipedia·Scrollbar Styler on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement