W3docs
it
Accedi

Proprietà CSS scrollbar

Usa la proprietà CSS scrollbar per creare temi personalizzati per le barre di scorrimento. Scopri i valori e gli esempi.

Il set di pseudo-elementi CSS ::-webkit-scrollbar è un hook di stile proprietario che consente ai designer di creare temi personalizzati per le barre di scorrimento native del browser.

Informazione

Questi pseudo-elementi sono esposti tramite il prefisso vendor -webkit e sono supportati principalmente nei browser basati su Chromium. Non sono supportati in Firefox o Safari. Per un supporto più ampio, considera l'uso delle proprietà standard scrollbar-width e scrollbar-color.

I pseudo-elementi ::-webkit-scrollbar sono composti da sette parti diverse che, insieme, costituiscono un elemento UI completo per la barra di scorrimento. Questi sette pseudo-elementi sono i seguenti:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-scrollbar-resizer

Una barra di scorrimento appare solo quando il contenuto di un elemento è più grande del suo box, quindi applicarle uno stile va di pari passo con la famiglia di proprietà overflow — overflow-x e overflow-y ti permettono di controllare indipendentemente lo scorrimento orizzontale e verticale.

Sintassi

Per applicare stili alle barre di scorrimento, si applicano le regole CSS direttamente ai pseudo-elementi ::-webkit-scrollbar sul contenitore scorrevole. È possibile prendere come target qualsiasi elemento con overflow impostato su scroll o auto, non solo il body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Esempio dei pseudo-elementi scrollbar:

Esempio di codice CSS scrollbar

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Provalo tu stesso »

Esempio dei pseudo-elementi scrollbar con ::-webkit-scrollbar-track e ::-webkit-scrollbar-thumb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Provalo tu stesso »

Barre di scorrimento standard cross-browser

Poiché i pseudo-elementi ::-webkit-scrollbar funzionano solo nei browser basati su Chromium, il CSS Working Group ha introdotto due proprietà standard che Firefox supporta oggi e che i motori Webkit/Blink ora riconoscono anch'essi: scrollbar-width e scrollbar-color.

  • scrollbar-width — imposta lo spessore. Accetta le parole chiave auto (predefinito), thin, o none (nasconde la barra di scorrimento mantenendo l'elemento scorrevole).
  • scrollbar-color — accetta due colori: il colore del thumb (cursore) per primo, poi il colore del track (binario).
.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

Un approccio robusto consiste nel dichiarare prima le proprietà standard come base, poi aggiungere le regole ::-webkit-scrollbar per un controllo più fine nei browser Chromium che ne hanno bisogno:

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}
Informazione

Usa scrollbar-width: thin e scrollbar-color quando hai solo bisogno di ricolorare o ridurre la barra di scorrimento su tutti i browser moderni. Ricorri ai pseudo-elementi ::-webkit-scrollbar solo quando devi applicare stili a singole parti (pulsanti, pezzo di traccia, angolo) che le proprietà standard non possono raggiungere. L'arrotondamento del cursore con border-radius è disponibile solo con -webkit-.

Pseudo-elementi

Pseudo-elementoDescrizione
::-webkit-scrollbarLa barra di scorrimento stessa.
::-webkit-scrollbar-buttonI pulsanti sulla barra di scorrimento.
::-webkit-scrollbar-trackIl binario della barra di scorrimento.
::-webkit-scrollbar-track-pieceLa parte del binario non coperta dalla maniglia.
::-webkit-scrollbar-thumbLa maniglia di scorrimento trascinabile.
::-webkit-scrollbar-cornerL'angolo inferiore della barra di scorrimento, dove si incontrano la barra orizzontale e quella verticale.
::-webkit-scrollbar-resizerLa maniglia di ridimensionamento trascinabile che appare nell'angolo inferiore di alcuni elementi.

Esercitazione

Pratica
Quali proprietà CSS vengono utilizzate per modificare l'aspetto delle barre di scorrimento?
Quali proprietà CSS vengono utilizzate per modificare l'aspetto delle barre di scorrimento?
Was this page helpful?