Generatore di barre di scorrimento CSS

Proprietà standard moderne (dal 2023)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Compatibilità dei browser (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Riserva lo spazio della barra di scorrimento anche quando non serve, evitando spostamenti del layout.

Pseudo-elementi webkit (Chrome, Safari, Edge meno recente)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Un controllo più dettagliato. width imposta la larghezza della barra di scorrimento verticale; height imposta l’altezza di quella orizzontale. Aggiungi entrambe per i contenitori che possono scorrere in entrambe le direzioni.

Combina i due approcci in cascata

Specifica prima le regole moderne, poi webkit come miglioramento per i browser che interpretano entrambe:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox rispetta solo le moderne regole scrollbar-*. Chrome e Safari rispettano le regole webkit (che sovrascrivono quelle moderne, così il comportamento resta coerente).

scrollbar-gutter evita lo spostamento del contenuto

Senza uno spazio riservato, il contenuto si ridispone quando compare una barra di scorrimento (comune negli elenchi dinamici). Soluzione:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Lo spazio della barra di scorrimento viene riservato indipendentemente dal fatto che il contenuto scorra o meno. both-edges aggiunge uno spazio corrispondente sul lato opposto per mantenere il contenuto visivamente centrato.

Nascondere del tutto le barre di scorrimento

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Attenzione: nascondere la barra di scorrimento impedisce agli utenti di capire che il contenuto è scorrevole. Usalo solo con un indicatore chiaro (frecce, puntini di pagina) o quando lo scorrimento è evidente dal contesto (caroselli orizzontali, cronologie di chat).

Considerazioni sui dispositivi mobili

Su iOS e Android le barre di scorrimento compaiono solo per un istante durante lo scorrimento. Il tuo CSS personalizzato viene comunque applicato, ma gli utenti potrebbero non vederlo mai per più di un secondo. Progetta di conseguenza: non investire troppo in dettagli visivi che compaiono di rado.

Accessibilità

• Contrasto: il cursore rispetto al binario deve soddisfare un rapporto di 3:1 per il contrasto non testuale (WCAG 1.4.11).
• Larghezza: le barre di scorrimento sottili possono essere difficili da afferrare con il mouse, soprattutto per gli utenti con disabilità motorie. La larghezza normale è un valore predefinito più sicuro.
• Non rimuovere mai la barra di scorrimento nelle aree scorrevoli senza fornire un altro modo per scorrere. Gli utenti che dipendono dalla barra resteranno bloccati.