La barra di scorrimento grigia predefinita del browser funziona come un biglietto da visita fatto con un costruttore di siti gratuito: fa il suo dovere, ma lascia un'impressione mediocre. Si nota soprattutto quando l'intero sito è curato al pixel, i font sono scelti con attenzione, i colori sono rifiniti, e poi c'è questa barra spigolosa che spunta dall'era di Internet Explorer sul lato destro.

Gli sviluppatori spesso evitano l'argomento. Non perché sia difficile, quattro righe di CSS risolvono il problema. Piuttosto, si frappongono dei miti: «funziona solo su Chrome», «gli utenti non ci fanno caso», «è una trovata, non una funzionalità da produzione».

In realtà, lo standard W3C copre le basi con due proprietà, e gli pseudo-elementi WebKit danno il controllo su ogni dettaglio, dagli arrotondamenti ai gradienti. Ho raccolto entrambi gli approcci in un unico tutorial: dalle specifiche al codice cross-browser pronto per la produzione che non ti vergognerai di mettere online.

💡 Panoramica rapida:

• Configurare la barra di scorrimento con scrollbar-width e scrollbar-color: due righe, piena compatibilità cross-browser, nessun prefisso.
• Padroneggiare ::-webkit-scrollbar e i suoi discendenti per un controllo granulare di traccia, cursore e angoli.
• Costruire una soluzione cross-browser: lo standard per Firefox, gli pseudo-elementi per Chrome/Safari/Edge, nessun conflitto.
• Esaminare gli errori comuni: specificità, accessibilità, pulsanti mancanti, insidie dei browser mobile.

Perché stilizzare la barra di scorrimento

Il primo e principale argomento è la coesione visiva. Immagina una landing page scura con accenti neon e una barra di scorrimento bianco brillante sulla destra. O un sito minimalista chiaro dove la barra di scorrimento è l'unico elemento che rompe la palette di colori. Tecnicamente non è un bug, ma dà l'impressione di un lavoro non finito.

Il secondo punto è il branding. Una barra di scorrimento colorata diventa parte del linguaggio visivo: un cursore verde per un servizio di consegna pasti sani, arancione per una piattaforma di prenotazioni. Un piccolo dettaglio che rafforza l'associazione senza bisogno di banner aggiuntivi e popup.

Terzo, la gestione dell'attenzione. Una barra di scorrimento sottile e semi-trasparente non ruba la scena al contenuto. Nelle landing page lunghe, una barra stretta non divora visivamente pixel preziosi di larghezza, e nei layout mobile con margini laterali ogni pixel conta.

E il punto chiave: non è un trucchetto da smanettoni. Le proprietà scrollbar-width e scrollbar-color fanno parte della specifica CSS Scrollbars Styling Module Level 1 e sono supportate da tutti i browser attuali. Secondo i dati di Can I Use di giugno 2026, la copertura delle proprietà standard supera il 95% degli utenti, l'era dei prefissi proprietari per le barre di scorrimento è finita.

Approccio standard: scrollbar-width e scrollbar-color

Il metodo più semplice e affidabile. Due proprietà senza prefissi, sintassi chiara, funziona su Firefox, Chrome, Edge e Safari.

Sintassi di base

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

Il primo valore in scrollbar-color è il colore del cursore, il secondo è il colore della traccia. La proprietà scrollbar-width accetta tre valori:

• auto, larghezza standard (circa 17px su Windows, 15px su macOS con un mouse);
• thin, barra di scorrimento sottile (circa 8px);
• none, nasconde completamente la barra di scorrimento (lo scorrimento funziona ancora, ma l'utente potrebbe non capire che il contenuto scorre, usare con cautela).

Esempio per tema scuro

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Risultato: una traccia scura che si abbina al colore di sfondo e un cursore grigio. Niente rompe la palette, due righe di codice.

Limiti dello standard

La specifica è volutamente minimalista: non si possono impostare border-radius, ombre, gradienti o effetti hover. È un compromesso tra personalizzazione e salvaguardia dell'usabilità, una barra di scorrimento eccessivamente fuori standard rompe il modello di interazione familiare. Se il set standard non basta, si usano gli pseudo-elementi WebKit.

Regolazione fine con::-webkit-scrollbar

Il set di pseudo-elementi ::-webkit-scrollbar-* non fa parte dello standard W3C, ma è supportato dai browser WebKit e Blink: Chrome, Edge, Safari, Opera, Brave, Arc. La copertura, secondo le statistiche di Can I Use, comprende la stragrande maggioranza degli utenti desktop.

Architettura della barra di scorrimento in WebKit

Una barra di scorrimento del browser è composta da sette parti, ognuna con il proprio pseudo-elemento:

In pratica, la stragrande maggioranza dei compiti si risolve con tre: scrollbar, track e thumb. Gli altri sono per soluzioni di design specifiche.

Esempio: barra di scorrimento discreta per un blog

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Larga sei pixel, traccia trasparente (invisibile senza scorrimento), cursore arrotondato con scurimento all'hover. La barra di scorrimento non urla la sua presenza, ma ha un aspetto moderno.

Esempio con gradiente per una landing page

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

Gradiente verticale sul cursore, traccia scura, bordo sottile per separarlo dallo sfondo. Tre righe aggiuntive rispetto alla base, la percezione della pagina cambia.

Nascondere la barra di scorrimento senza perdere lo scroll

Tecnica classica per finestre modali e menu burger:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

Il contenitore rimane scrollabile, ma la barra scompare sia su Firefox (scrollbar-width: none) sia sui browser WebKit (display: none su ::-webkit-scrollbar stesso).

Soluzione cross-browser

Combinando lo standard e gli pseudo-elementi in un unico blocco, la copertura è quasi completa:

1
/* W3C standard — Firefox, modern Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* WebKit pseudo-elements — detailed styling for Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

L'ordine è importante: prima le proprietà standard, poi gli pseudo-elementi. I browser con supporto standard applicano scrollbar-color e ignorano ::-webkit-scrollbar-*, come richiesto dalle specifiche. I browser senza supporto standard usano gli pseudo-elementi. Non si crea alcun conflitto.

Dove inserire il codice

Tre opzioni, dalla semplice alla flessibile:

• Globalmente nel file style.css del tema. Adatto se lo stile della barra di scorrimento è uguale per tutto il sito. Svantaggio: le modifiche si perdono con l'aggiornamento del tema.
• Nella sezione "Stili aggiuntivi" del personalizzatore. Percorso: Aspetto → Personalizza → Stili aggiuntivi. Metodo sicuro per WordPress: gli stili risiedono nelle impostazioni del tema e non si azzerano con l'aggiornamento.
• Tramite un plugin come Code Snippets. Se serve impostare la barra di scorrimento in modo specifico per certe pagine tramite classi CSS.

In un tema child, gli stili si collegano tramite un file separato via wp_enqueue_scripts con l'hook wp_head.

Errori comuni nella stilizzazione

Compatibilità cross-browser dimenticata. Si imposta solo ::-webkit-scrollbar, la barra predefinita rimane su Firefox. Aggiungere sempre scrollbar-width e scrollbar-color come coppia sopra nel codice.

Barra di scorrimento troppo sottile. Con una larghezza di 2-3px in ::-webkit-scrollbar, cliccare il cursore con il mouse diventa un compito di abilità motoria. Particolarmente critico sui portatili senza mouse esterno. La larghezza minima confortevole è 6px.

Contrasto zero. Cursore grigio su traccia grigia si fonde in un'unica macchia. Il contrasto cromatico minimo tra cursore e traccia è 3:1, un requisito WCAG 2.1 AA per gli elementi dell'interfaccia.

Sovrascrittura superflua di tutti gli pseudo-elementi. Il codice si gonfia, effetto zero. Nella maggior parte dei casi bastano scrollbar, track e thumb. Toccare pulsanti (button) e angolo (corner) solo se il design lo richiede davvero.

Perdita di stile sull'intero body. Impostare su * o html senza restrizioni stilizza anche le barre di scorrimento interne: campi di testo, blocchi di codice, elenchi a discesa. Per le anteprime di codice questo è quasi sempre inutile. Usare selettori di classe: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Domande frequenti

La stilizzazione della barra di scorrimento funziona sui dispositivi mobili?

No, nei browser mobile la barra di scorrimento non viene visualizzata staticamente, appare solo durante lo scorrimento ed è controllata dal sistema operativo. Lo stile CSS non si applica su iOS e Android. Ma non è un problema: su mobile la barra di scorrimento non è un elemento permanente dell'interfaccia. Verificato su iOS 18 Safari e Android 15 Chrome, gli stili personalizzati vengono ignorati, si usa l'indicatore di sistema. Sui tablet con tastiera esterna la barra di scorrimento potrebbe essere sempre visibile, e gli stili funzionano.

Come stilizzare la barra di scorrimento orizzontale separatamente da quella verticale?

Tramite pseudo-elementi con prefisso di direzione: ::-webkit-scrollbar-horizontal e ::-webkit-scrollbar-vertical. In pratica si usano raramente, il supporto è peggiore rispetto agli pseudo-elementi principali. È più affidabile collegare gli stili a un contenitore specifico con il tipo di scorrimento necessario tramite un selettore di classe. Per lo scorrimento orizzontale dentro un blocco di codice: .code-block::-webkit-scrollbar { height: 4px; } imposta l'altezza della barra orizzontale, e .code-block::-webkit-scrollbar-thumb { background: #666; } stilizza il cursore. Le proprietà standard scrollbar-width e scrollbar-color funzionano allo stesso modo per entrambe le direzioni.

Si può animare la barra di scorrimento all'hover?

Sì, tramite transition su ::-webkit-scrollbar-thumb. Ma il supporto delle transizioni sugli pseudo-elementi non è completo: Chrome e Edge funzionano, Safari potrebbe avere dei glitch. Quindi più spesso si usa il cambio di colore tramite :hover senza animazione, è più affidabile e dà un aspetto pulito. Variante funzionante: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } cambia dolcemente il colore del cursore. Non applicare la transizione a width: cambiare la larghezza della barra all'hover sposta il contenuto e dà fastidio.

Come stilizzare la barra di scorrimento dentro un blocco specifico, non l'intera pagina?

Usare un selettore composto: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Per le proprietà standard: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Funziona per qualsiasi contenitore con overflow-y: auto o overflow-y: scroll. Non usare il selettore * per la barra di scorrimento, influenzerebbe campi di testo ed elenchi a discesa.

È obbligatorio duplicare gli stili per ::-webkit-scrollbar e le proprietà standard?

Sì, se serve compatibilità cross-browser. Firefox usa solo scrollbar-width e scrollbar-color, ignorando gli pseudo-elementi. Chrome e Edge dalla versione 121 supportano entrambi i meccanismi, ma applicano le proprietà standard con priorità, gli pseudo-elementi in essi funzionano come fallback per le versioni precedenti. Quattro righe di codice (due per lo standard, due per WebKit) coprono tutti i browser senza conflitti.

Vale la pena stilizzare la barra di scorrimento nel 2026

Decisamente sì, se stai costruendo un sito pubblico. Due righe di CSS standard ti danno una barra di scorrimento discreta che non rompe il design e non richiede polyfill. Per landing page e progetti brandizzati, gli pseudo-elementi WebKit aggiungono individualità senza danneggiare le performance.

La regola principale è non esagerare. La barra di scorrimento resta un elemento funzionale dell'interfaccia, non una tela per esperimenti. Larghezza minima 6px, contrasto non inferiore a 3:1, nessuna animazione della larghezza, e l'utente non noterà nemmeno che la barra di scorrimento è stilizzata. Ed è proprio questo il segno di un buon lavoro.

Se il sito è su WordPress, inserisci il codice negli stili aggiuntivi del personalizzatore, ci vorrà un minuto. Il risultato ti accompagnerà attraverso gli aggiornamenti del tema e farà piacere agli occhi di chiunque scorra la pagina fino in fondo.