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 modificare 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.

Quelle che sono state standardizzate sono le proprietà scrollbar-width e scrollbar-color, parte della specifica di livello 1 del modulo di stile delle barre di scorrimento CSS. Queste proprietà sono supportate a partire da Chrome 121.

Supporto dei browser

• 121
• 121
• 64
• x

Origine

Guida introduttiva alle barre di scorrimento

Anatomia di una barra di scorrimento

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

Le barre di scorrimento possono avere più parti oltre al cursore e alla barra. 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.

Illustrazione delle parti che compongono una barra di scorrimento. L'illustrazione a sinistra è una barra di scorrimento di dimensioni minime con una traccia e un pollice. Anche quella a destra ha dei pulsanti.

Barre di scorrimento classiche e in overlay

Prima di esaminare come applicare uno stile alle barre di scorrimento, è importante comprendere la differenza tra i due tipi di barra 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. Per mantenere visibili i contenuti sottostanti, sono spesso semitrasparenti, ma la decisione spetta al sistema operativo. Durante l'interazione, le dimensioni possono variare.

Illustrazione di un browser con una barra di scorrimento overlay. La barra di scorrimento si sovrappone ai contenuti e il pollice è parzialmente trasparente.

Barre di scorrimento classiche

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

Immagine di un browser con una barra di scorrimento classica. La barra di scorrimento è posizionata accanto ai contenuti nella propria area dedicata; la larghezza disponibile dei contenuti si riduce rispetto a quella disponibile quando vengono utilizzate le barre di scorrimento overlay.

Le proprietà scrollbar-color e scrollbar-width

Assegnare un colore alle 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 dell'anteprima, mentre il secondo il colore da utilizzare per la traccia.

.scroller {
  scrollbar-color: hotpink blue;
}

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

Demo: Stile delle barre di scorrimento: scrollbar-color

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

Modifica delle 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 scorrevolezza.

I valori accettati sono auto, thin e none.

• auto: la larghezza della barra di scorrimento predefinita fornita dalla piattaforma.
• thin: una variante sottile della barra di scorrimento fornita dalla piattaforma o una barra di scorrimento personalizzata più sottile della barra di scorrimento predefinita della piattaforma.
• none: nasconde efficacemente 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 in overlay, il cursore viene visualizzato solo mentre scorri attivamente l'area scorrevole.

Demo: applicazione di stili alle barre di scorrimento: scrollbar-width

Supporto delle versioni precedenti dei browser

Per soddisfare le versioni del browser che non supportano scrollbar-color e scrollbar-width, è possibile 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);
    }
}

Demo: applicazione di stili alle barre di scorrimento utilizzando scrollbar-* con un fallback a ::-webkit-scrollbar-*

Tieni presente che quando imposti width o height di ::-webkit-scrollbar, viene sempre visualizzata una barra di scorrimento in overlay, 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 il cursore.

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

Demo: applicazione di stili alle barre di scorrimento utilizzando scrollbar-* con un fallback a ::-webkit-scrollbar-*, applicando i colori di ::-webkit-scrollbar-* solo al passaggio del mouse