Come fare per - Barra di scorrimento personalizzata
Scopri come creare una barra di scorrimento personalizzata con CSS.
Barre di scorrimento personalizzate
Nota: le barre di scorrimento personalizzate non sono supportate in Firefox o in Edge, versione precedente 79.
Come creare barre di scorrimento personalizzate
Chrome, Edge, Safari e Opera supportano lo pseudo elemento non standard ::-webkit-scrollbar
, che ci consente di modificare l'aspetto della barra di scorrimento del browser.
L'esempio seguente crea una barra di scorrimento sottile (10px di larghezza), che ha un colore di traccia/barra grigio e una maniglia grigio scuro (#888):
Esempio
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Questo esempio crea una barra di scorrimento con l'ombreggiatura del riquadro:
Esempio
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Selettori 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.::-webkit-scrollbar-button
i pulsanti sulla barra di scorrimento (frecce rivolte verso l'alto e verso il basso).::-webkit-scrollbar-thumb
la maniglia di scorrimento trascinabile.::-webkit-scrollbar-track
la traccia (barra di avanzamento) della barra di scorrimento.::-webkit-scrollbar-track-piece
il binario (barra di avanzamento) NON coperto dalla maniglia.::-webkit-scrollbar-corner
nell'angolo inferiore della barra di scorrimento, dove si incontrano le barre di scorrimento orizzontale e verticale.::-webkit-resizer
la maniglia di ridimensionamento trascinabile che appare nell'angolo inferiore di alcuni elementi.