Usa las propiedades scrollbar-width y scrollbar-color para definir el diseño de las barras de desplazamiento.
Introducción
A partir de la versión 2 de Chrome, es posible diseñar 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 se estandarizó son las propiedades scrollbar-width y scrollbar-color, que forman parte de la especificación de nivel 1 de 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 pulgar. La pista es el área en la que se puede mover el pulgar. El recorrido representa toda la distancia de desplazamiento. El círculo representa la posición actual dentro de la región desplazable. A medida que te desplazas, se mueve dentro de la pista. A menudo, el pulgar también es arrastrable.
Sin embargo, las barras de desplazamiento pueden tener más partes que solo la miniatura y la pista. Por ejemplo, una barra de desplazamiento podría tener uno o más botones para aumentar o disminuir el desplazamiento de desplazamiento. El sistema operativo subyacente determina las partes que conforman una barra de desplazamiento.
Barras de desplazamiento clásicas y superpuestas
Antes de ver cómo aplicar estilo a las barras de desplazamiento, es importante que comprendas 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 está debajo. No se muestran de forma predeterminada, sino solo mientras te desplazas activamente. Para mantener visible el contenido que se encuentra debajo, a menudo son semitransparentes, pero lo decide el sistema operativo. Al interactuar 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 dedicado. El margen de la barra de desplazamiento es el espacio entre el borde del borde interno y el borde de padding externo. Estas barras de desplazamiento suelen ser opacas (no transparentes) y quitan espacio del contenido adyacente.
Las propiedades scrollbar-color y scrollbar-width
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 predeterminado. Sin embargo, al colocar el cursor sobre la barra de desplazamiento, se mostrará el recorrido.
scrollbar-colorPara usar la renderización predeterminada que proporciona el sistema operativo, utiliza auto como su valor.
Cambia 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.
Se aceptan los valores auto, thin y none.
auto: Es el ancho predeterminado de la barra de desplazamiento según lo 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 eficazmente la barra de desplazamiento. 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 cuando te desplazas activamente por el área desplazable.
scrollbar-widthCompatibilidad con versiones anteriores del navegador
Para satisfacer las versiones del 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);
}
}
scrollbar-* con un resguardo a ::-webkit-scrollbar-*Ten en cuenta que cuando configuras el width o el height de ::-webkit-scrollbar, siempre se muestra una barra de desplazamiento superpuesta, lo que la convierte efectivamente en una barra de desplazamiento clásica.
Para mantener la ilusión, puedes elegir cambiar solo 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. */
}
scrollbar-* con un resguardo a ::-webkit-scrollbar-*, solo aplicando los colores ::-webkit-scrollbar-* cuando colocas el cursor