Personalizza il colore o lo spessore di una barra di scorrimento

Puoi personalizzare l'aspetto delle barre di scorrimento utilizzando le proprietà CSS standard scrollbar-color e scrollbar-width.

• scrollbar-color: accetta due valori <color>. Il primo si applica al cursore (la parte mobile) e il secondo alla barra (lo sfondo fisso).
• scrollbar-width: accetta auto (predefinito), thin (una variante più sottile) o none (nasconde completamente la barra di scorrimento mantenendo la possibilità di scorrimento).

Applica scrollbar-color e scrollbar-width

OBBLIGATORIO: utilizza scrollbar-color e scrollbar-width sul contenitore scorrevole.

Quando utilizzi scrollbar-color, utilizza le variabili CSS per mantenere separati i colori del cursore e della barra di scorrimento, per una maggiore leggibilità e gestibilità (soprattutto quando utilizzi i fallback).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Strategie di riserva

Alternative e supporto del browser per scrollbar-color

Questa funzionalità è un potenziamento progressivo e non richiede sempre i fallback.

Se lo stile è importante e il target Baseline dell'utente è "Baseline ampiamente disponibile" o precedente, DEVI includere gli pseudo-elementi ::-webkit-scrollbar non standard come fallback.

Racchiudi i fallback legacy in un blocco @supports not (scrollbar-color: auto) per evitare conflitti tra le proprietà standard e i selettori WebKit legacy nei browser che supportano entrambi in modo nativo.

Se utilizzi proprietà personalizzate per definire i colori, questi verranno applicati automaticamente ai selettori WebKit legacy. NON è necessario duplicarli.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}