Stili della barra di scorrimento

Utilizza le proprietà scrollbar-width e scrollbar-color per applicare uno stile alle barre di scorrimento.

Bramus

Introduzione

A partire dalla versione 2 di Chrome è possibile applicare stili alle barre di scorrimento con gli pseudo-elementi ::-webkit-scrollbar-*. Questo approccio funziona bene in Chrome e Safari, ma non è mai stato standardizzato dal CSS Working Group.

Ciò che è stato standardizzato sono le proprietà scrollbar-width e scrollbar-color, che fanno parte della specifica del modulo di stile delle barre di scorrimento CSS di livello 1. Queste proprietà sono supportate a partire da Chrome 121.

Barre di scorrimento: guida introduttiva

Anatomia di una barra di scorrimento

Come minimo, una barra di scorrimento è costituita da una traccia e da un cursore. La traccia è l'area in cui può muoversi il pollice. La traccia rappresenta l'intera distanza di scorrimento. Il cursore rappresenta la posizione corrente all'interno della regione scorrevole. Mentre scorri, si sposta all'interno della traccia. Spesso anche il cursore è trascinabile.

Le barre di scorrimento possono avere più parti del cursore e della traccia. Ad esempio, una barra di scorrimento potrebbe avere uno o più pulsanti per aumentare o diminuire l'offset di scorrimento. Le parti che compongono una barra di scorrimento sono determinate dal sistema operativo sottostante.

Barre di scorrimento classiche e overlay

Prima di esaminare come applicare uno stile alle barre di scorrimento, è importante comprendere la distinzione tra due tipi di barre di scorrimento.

Barre di scorrimento overlay

Le barre di scorrimento in overlay sono barre di scorrimento mobili visualizzate sopra i contenuti sottostanti. Non vengono mostrati per impostazione predefinita, ma solo mentre scorri attivamente. Per mantenere visibili i contenuti sottostanti, spesso sono semitrasparenti, ma la decisione spetta al sistema operativo. Anche le dimensioni possono variare durante l'interazione.

Barre di scorrimento classiche

Le barre di scorrimento classiche sono posizionate in un canale della barra di scorrimento dedicato. La canaletta della barra di scorrimento è lo spazio tra il bordo interno e il bordo del padding esterno. Queste barre di scorrimento sono in genere opache (non trasparenti) e occupano spazio sottraendolo ai contenuti adiacenti.

Le proprietà scrollbar-color e scrollbar-width

Assegnare un colore alle barre di scorrimento con scrollbar-color

La proprietà scrollbar-color ti consente di modificare la combinazione di colori delle barre di scorrimento. La proprietà accetta due valori <color>. Il primo valore <color> determina il colore del cursore, mentre il secondo il colore da utilizzare per la traccia.

.scroller {
  scrollbar-color: hotpink blue;
}

Quando si utilizza una barra di scorrimento overlay, il colore della traccia non ha alcun effetto per impostazione predefinita. Tuttavia, se passi il mouse sopra la barra di scorrimento, la traccia viene visualizzata.

Per utilizzare il rendering predefinito fornito dal sistema operativo, utilizza auto come valore.

Modificare le dimensioni della barra di scorrimento con scrollbar-width

La proprietà scrollbar-width ti consente di scegliere una barra di scorrimento più stretta o persino di nasconderla completamente senza influire sulla possibilità di scorrere.

I valori accettati sono auto, thin e none.

• auto: la larghezza predefinita della barra di scorrimento fornita dalla piattaforma.
• thin: una variante sottile della barra di scorrimento fornita dalla piattaforma o una barra di scorrimento personalizzata più sottile di quella predefinita della piattaforma.
• none: nasconde efficacemente la barra di scorrimento. Tuttavia, l'elemento è ancora scorrevole.

Non è possibile utilizzare un <length> come 16px come valore per scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

Quando utilizzi una barra di scorrimento sovrapposta, il cursore viene disegnato solo mentre scorri attivamente l'area scorrevole.

Supporto delle versioni precedenti del browser

Per supportare le versioni del browser che non supportano scrollbar-color e scrollbar-width, è possibile utilizzare sia le nuove proprietà scrollbar-* che ::-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);
    }
}

Tieni presente che quando imposti width o height di ::-webkit-scrollbar, viene sempre visualizzata una barra di scorrimento sovrapposta, che la trasforma in una barra di scorrimento classica.

Per mantenere l'illusione, puoi scegliere di modificare i colori solo quando passi il mouse sopra lo scorrimento.

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