Estilos de la barra de desplazamiento

Usa las propiedades scrollbar-width y scrollbar-color para definir el estilo de las barras de desplazamiento.

Bramus

Introducción

A partir de la versión 2 de Chrome, es posible aplicar estilos a las barras de desplazamiento con los seudoelementos ::-webkit-scrollbar-*. Este enfoque funciona bien en Chrome y Safari, pero nunca fue estandarizado por el Grupo de trabajo de CSS.

Lo que se estandarizó son las propiedades scrollbar-width y scrollbar-color, que forman parte de la especificación del nivel 1 del módulo de diseño de las barras de desplazamiento de CSS. 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 recorrido y un círculo. La vía es el área por la que puede moverse el pulgar. El seguimiento representa la distancia total de desplazamiento. El círculo representa la posición actual dentro de la región desplazable. A medida que te desplazas, este se mueve dentro del recorrido. A menudo, el pulgar también es arrastrable.

Sin embargo, las barras de desplazamiento pueden tener más partes que solo el círculo y la pista. 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 conforman una barra de desplazamiento.

Barras de desplazamiento clásicas y superpuestas

Antes de analizar cómo aplicar el estilo 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 aparece debajo. No se muestran de forma predeterminada, sino solo mientras te desplazas activamente. Para mantener visible el contenido debajo, a menudo son semitransparentes, pero eso depende del 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 barras de desplazamiento que se colocan en un medianil de la barra de desplazamiento exclusivo. El medianil de la barra de desplazamiento es el espacio entre el borde del borde interno y el borde externo del padding. Estas barras de desplazamiento suelen ser opacas (no transparentes) y quitan parte del 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 colores de las barras de desplazamiento. La propiedad acepta dos valores <color>. El primer valor de <color> determina el color del círculo y el segundo el color que se usará para la pista.

.scroller {
  scrollbar-color: hotpink blue;
}

Cuando se utiliza una barra de desplazamiento superpuesta, el color del recorrido no tiene ningún efecto de forma predeterminada. Sin embargo, se mostrará el recorrido al colocar el cursor sobre la barra de desplazamiento.

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

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 predeterminada de la plataforma.
• none: Oculta la barra de desplazamiento de forma efectiva. Sin embargo, el elemento aún se puede desplazar.

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

.scroller {
  scrollbar-width: thin;
}

Cuando se usa una barra de desplazamiento superpuesta, el círculo solo se dibuja mientras te desplazas activamente por el área desplazable.

Compatibilidad con versiones anteriores del navegador

Para satisfacer las versiones de navegador que no son compatibles con 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 estableces el valor de width o height de ::-webkit-scrollbar, siempre se muestra una barra de desplazamiento superpuesta, convirtiéndola efectivamente en una barra de desplazamiento clásica.

Para mantener la ilusión, puedes elegir solo cambiar los colores cuando colocas el cursor sobre la barra de desplazamiento.

.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. */
}