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.

Barre di scorrimento - Guida introduttiva

Struttura di una barra di scorrimento

Una barra di scorrimento è formata come minimo 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 includere più parti oltre al pollice e alla rotta. 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 vedere come definire lo stile delle barre di scorrimento, è importante comprendere la distinzione tra due tipi di barre.

Barre di scorrimento overlay

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

Barre di scorrimento classiche

Le barre di scorrimento classiche sono barre di scorrimento posizionate in un'apposita grondaia. La grondaia della barra di scorrimento è lo spazio tra il bordo interno e quello esterno della spaziatura interna. Queste barre di scorrimento sono generalmente opache (non trasparenti) e occupano spazio ai contenuti adiacenti.

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

Per usare 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 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 predefinita della barra di scorrimento, come 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 effettivamente la barra di scorrimento. Tuttavia, l'elemento è comunque scorrevole.

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

.scroller {
  scrollbar-width: thin;
}

Quando utilizzi una barra di scorrimento sovrapposta, il pollice viene disegnato solo mentre stai scorrendo attivamente l'area.

Supporto di versioni precedenti del 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);
    }
}

Tieni presente che, se imposti width o height di ::-webkit-scrollbar, viene sempre visualizzata una barra di scorrimento overlay che, a sua volta, si 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. */
}