Come creare: Barra di scorrimento personalizzata

Impara come creare una barra di scorrimento personalizzata utilizzando CSS.

Barra di scorrimento personalizzata

Prova tu stesso

Prova tu stesso

Attenzione:Firefox o versioni precedenti di Edge 79 non supportano la barra di scorrimento personalizzata.

Come creare una barra di scorrimento personalizzata

Chrome, Edge, Safari e Opera supportano pseudo-elementi non standard ::-webkit-scrollbar Pseudo-elemento che ci permette di modificare l'aspetto della barra di scorrimento del browser.

Nell'esempio seguente viene creata una barra di scorrimento larga 10px, con traccia/colore della barra grigia e slider scuro (#888):

/* Larghezza */
::-webkit-scrollbar {
  width: 10px;
}
/* Traccia */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Slider al passaggio del mouse */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Prova tu stesso

Questo esempio crea una barra di scorrimento con un effetto d'ombreggiatura:

Esempio

/* Larghezza */
::-webkit-scrollbar {
  width: 20px;
}
/* Traccia */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Prova tu stesso

Selettore della barra di scorrimento

Per i browser webkit, puoi utilizzare i seguenti pseudo-elementi per personalizzare la barra di scorrimento del browser:

::-webkit-scrollbar La barra di scorrimento stessa.
::-webkit-scrollbar-button I pulsanti sulla barra di scorrimento (freccie in su e in giù).
::-webkit-scrollbar-thumb Il slider scorrevole.
::-webkit-scrollbar-track La traccia della barra di scorrimento (barra di avanzamento).
::-webkit-scrollbar-track-piece La parte della traccia (barra di avanzamento) non coperta dal slider.
::-webkit-scrollbar-corner L'angolo inferiore della barra di scorrimento, dove si incrociano la barra di scorrimento orizzontale e quella verticale.
::-webkit-resizer Maniglia di trascinamento per l'adattamento delle dimensioni che appare nell'angolo inferiore destro di alcuni elementi.