Stile della scrollbar con ::-webkit-scrollbar
Personalizzi l'aspetto della scrollbar usando gli pseudo-elementi webkit e la proprietà scrollbar-color.
Stile della scrollbar con ::-webkit-scrollbar è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Panoramica sulla personalizzazione delle barre di scorrimento
I browser visualizzano barre di scorrimento predefinite che variano a seconda del sistema operativo. CSS consente di personalizzare l'aspetto delle barre di scorrimento usando pseudo-elementi WebKit non standard e le moderne proprietà standard.
::-webkit-scrollbar
Il pseudo-elemento radice per l'intera barra di scorrimento. Imposti la larghezza (verticale) e l'altezza (orizzontale):
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
La canalina è il canale di sfondo lungo il quale scorre il cursore:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
Il cursore è l'indicatore di scorrimento trascinabile:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barra di scorrimento personalizzata completa
Un'implementazione completa di una barra di scorrimento personalizzata:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Standard moderno: scrollbar-color
scrollbar-color è la proprietà standardizzata supportata da Firefox. Imposta i colori del cursore e della canalina con una sola dichiarazione:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Standard moderno: scrollbar-width
scrollbar-width controlla le dimensioni della barra di scorrimento tramite valori con parole chiave:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Personalizzazione delle barre di scorrimento cross-browser
Per una copertura completa tra i browser, usi entrambi gli approcci:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Nascondere le barre di scorrimento mantenendo lo scorrimento
Renda un elemento scorrevole, ma nasconda visivamente la barra di scorrimento:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barre di scorrimento in modalità scura
Usi la proprietà CSS color-scheme per ottenere barre di scorrimento scure native del sistema operativo senza personalizzazioni:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Promemoria sull'accessibilità
Non renda le barre di scorrimento così piccole o invisibili da rendere difficile scoprire come scorrere. Le barre di scorrimento nascoste sono accettabili nei design pensati innanzitutto per il tocco, ma possono creare confusione sui computer desktop.
Verifica rapida
Quale proprietà CSS standardizzata imposta i colori delle barre di scorrimento ed è supportata da Firefox?
Riepilogo
Personalizzi le barre di scorrimento con i pseudo-elementi ::-webkit-scrollbar (WebKit) e le proprietà standard scrollbar-color/scrollbar-width (Firefox e browser moderni). Usi entrambi gli approcci per una compatibilità completa tra i browser. Usi scrollbar-width: none insieme all'equivalente WebKit per nascondere le barre di scorrimento mantenendo la funzionalità di scorrimento.
Domande Frequenti
La lezione «Stile della scrollbar con ::-webkit-scrollbar» è gratuita?
Sì — il testo completo di «Stile della scrollbar con ::-webkit-scrollbar» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Stile della scrollbar con ::-webkit-scrollbar»?
Personalizzi l'aspetto della scrollbar usando gli pseudo-elementi webkit e la proprietà scrollbar-color. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Stile della scrollbar con ::-webkit-scrollbar»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type e scroll-snap-align
- Stile della scrollbar con ::-webkit-scrollbar