← Todos los ejemplos

Barra de desplazamiento delgada personalizada

Sustituye la barra del sistema por una versión delgada y redondeada en color neutro.

Código para copiar

* { scrollbar-width: thin; scrollbar-color: #6b7280 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #6b7280; border-radius: 8px;
    border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #4b5563; background-clip: content-box; }

Cómo usar este ejemplo

1. Copia el código con el botón de arriba.
2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
3. Añade una nueva regla que coincida con esa página.
4. Pega el código en el panel CSS de la regla y guarda — el efecto aparece al instante.