Estilos de la barra de desplazamiento

Usa las propiedades scrollbar-width y scrollbar-color para aplicar estilo a las barras de desplazamiento.

Bramus

Introducción

Desde la versión 2 de Chrome, es posible aplicar estilo a las barras de desplazamiento con los seudoelementos ::-webkit-scrollbar-*. Este enfoque funciona bien en Chrome y Safari, pero el Grupo de trabajo de CSS nunca lo estandarizó.

Lo que sí se estandarizó son las propiedades scrollbar-width y scrollbar-color, que forman parte de la especificación del módulo de CSS Scrollbars Styling Level 1. Estas propiedades son compatibles a partir de Chrome 121.

Introducción a las barras de desplazamiento

Anatomía de una barra de desplazamiento

Como mínimo, una barra de desplazamiento consta de un riel y un control deslizante. El riel es el área en la que se puede mover el pulgar. El riel representa toda la distancia de desplazamiento. El pulgar representa la posición actual dentro de la región desplazable. A medida que te desplazas, se mueve dentro del riel. El pulgar también se puede arrastrar.

Sin embargo, las barras de desplazamiento pueden tener más partes que solo el pulgar y el riel. Por ejemplo, una barra de desplazamiento podría tener uno o más botones para aumentar o disminuir el desplazamiento. El sistema operativo subyacente determina las partes que componen una barra de desplazamiento.

Barras de desplazamiento clásicas y superpuestas

Antes de ver cómo aplicar estilos a las barras de desplazamiento, es importante comprender la distinción entre dos tipos de barras de desplazamiento.

Barras de desplazamiento superpuestas

Las barras de desplazamiento superpuestas son barras de desplazamiento flotantes que se renderizan sobre el contenido que se encuentra debajo. No se muestran de forma predeterminada, sino solo mientras te desplazas de forma activa. Para que se vea el contenido que hay debajo, suelen ser semitransparentes, pero eso lo decide el sistema operativo. Mientras interactúas con ellos, su tamaño también puede variar.

Barras de desplazamiento clásicas

Las barras de desplazamiento clásicas son las que se colocan en un canal de barra de desplazamiento exclusivo. El canal de la barra de desplazamiento es el espacio entre el borde interior y el borde exterior del padding. Estas barras de desplazamiento suelen ser opacas (no transparentes) y quitan espacio del contenido adyacente.

Las propiedades scrollbar-color y scrollbar-width

Cómo dar color a las barras de desplazamiento con scrollbar-color

La propiedad scrollbar-color te permite cambiar el esquema de color de las barras de desplazamiento. La propiedad acepta dos valores de <color>. El primer valor de <color> determina el color del pulgar y el segundo, el color que se usará para el riel.

.scroller {
  scrollbar-color: hotpink blue;
}

Cuando se usa una barra de desplazamiento superpuesta, el color del riel no tiene efecto de forma predeterminada. Sin embargo, cuando coloques el cursor sobre la barra de desplazamiento, se mostrará el riel.

Para usar la renderización predeterminada que proporciona el sistema operativo, usa auto como su valor.

Cómo cambiar el tamaño de la barra de desplazamiento con scrollbar-width

La propiedad scrollbar-width te permite elegir una barra de desplazamiento más estrecha o incluso ocultarla por completo sin afectar la capacidad de desplazamiento.

Los valores aceptados son auto, thin y none.

• auto: Es el ancho predeterminado de la barra de desplazamiento que proporciona la plataforma.
• thin: Es una variante delgada de la barra de desplazamiento que proporciona la plataforma o una barra de desplazamiento personalizada más delgada que la barra de desplazamiento predeterminada de la plataforma.
• none: Oculta la barra de desplazamiento de manera eficaz. Sin embargo, el elemento aún se puede desplazar.

No es posible usar un <length>, como 16px, como valor para scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

Cuando usas una barra de desplazamiento superpuesta, el pulgar solo se dibuja mientras desplazas activamente el área desplazable.

Compatibilidad con versiones anteriores del navegador

Para admitir versiones de navegadores que no admiten scrollbar-color y scrollbar-width, es posible usar las nuevas propiedades scrollbar-* y ::-webkit-scrollbar-*.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

Ten en cuenta que, cuando configuras width o height de ::-webkit-scrollbar, siempre se muestra una barra de desplazamiento superpuesta, lo que la convierte en una barra de desplazamiento clásica.

Para mantener la ilusión, puedes optar por cambiar los colores solo cuando se coloque el cursor sobre el control deslizante.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}