Stili della barra di scorrimento

Utilizza le proprietà scrollbar-width e scrollbar-color per definire lo stile delle barre di scorrimento.

Bramus

Introduzione

A partire dalla versione 2 di Chrome è possibile definire lo stile delle 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 di livello 1 del modulo di stile delle barre di scorrimento CSS. Queste proprietà sono supportate a partire da Chrome 121.

Barre di scorrimento di base

Struttura di una barra di scorrimento

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

Tuttavia, le barre di scorrimento possono avere più parti oltre al pollice e alla 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 in overlay

Prima di vedere come definire lo stile delle barre di scorrimento, è importante comprendere la distinzione tra due tipi di barre di scorrimento.

Barre di scorrimento overlay

Le barre di scorrimento overlay sono barre di scorrimento mobili visualizzate sopra i contenuti sottostanti. Non vengono mostrati per impostazione predefinita, ma soltanto mentre scorri attivamente. Per fare in modo che i contenuti sottostanti rimangano visibili siano spesso semitrasparenti, la decisione spetta al sistema operativo. Durante l'interazione, anche le loro dimensioni possono variare.

Barre di scorrimento classiche

Le barre di scorrimento classiche sono barre di scorrimento che si trovano in una grondaia della barra di scorrimento dedicata. Il margine della barra di scorrimento è lo spazio tra il bordo del bordo interno e quello esterno della spaziatura interna. Queste barre di scorrimento sono generalmente opache (non trasparenti) e occupano spazio nei contenuti adiacenti.

Le proprietà scrollbar-color e scrollbar-width

Impostazione del colore delle barre di scorrimento con scrollbar-color

La proprietà scrollbar-color 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 pollice e il secondo il colore da utilizzare per la traccia.

.scroller {
  scrollbar-color: hotpink blue;
}

Quando utilizzi una barra di scorrimento overlay, il colore della traccia non ha alcun effetto per impostazione predefinita. Tuttavia, quando passi il mouse sopra la barra di scorrimento, verrà visualizzata la traccia.

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

Modifica delle dimensioni della barra di scorrimento con scrollbar-width

La proprietà scrollbar-width consente di scegliere una barra di scorrimento più stretta o persino di nasconderla completamente senza comprometterne la scorrimento.

I valori accettati sono auto, thin e none.

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

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

.scroller {
  scrollbar-width: thin;
}

Quando utilizzi una barra di scorrimento overlay, il pollice viene disegnato solo mentre scorri attivamente l'area di scorrimento.

Supporto di versioni precedenti del browser

Per soddisfare le versioni del browser che non supportano scrollbar-color e scrollbar-width, puoi utilizzare entrambe le nuove proprietà scrollbar-* e ::-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 overlay, che la trasforma in una barra di scorrimento classica.

Per mantenere l'illusione, puoi scegliere di cambiare i colori solo quando passi il mouse sopra la barra di 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. */
}