Personalizzare le scrollbar con il Webkit

Il webkit ci mette a disposizione diversi elementi per poter personalizzare le scrollbar attraverso appositi pseudo-elementi.

Cimentandomi in questa proprietà ho realizzato queste due scrollbar:

DEMODOWNLOAD

Il codice che ho utilizzato è questo:

::-webkit-scrollbar{
   width:7px;
}
::-webkit-scrollbar-track:vertical{
   border-radius:10px;
}
::-webkit-scrollbar-thumb:vertical{
   border-radius:10px;
   background:#df3e02;
}
::-webkit-scrollbar-track-piece:vertical{
   background-color: rgba(0,0,0,0.9);
   border-radius:10px;
}
::-webkit-scrollbar:horizontal{
   height: 7px;
}
::-webkit-scrollbar-track:horizontal{
   border-radius:10px;
}
::-webkit-scrollbar-thumb:horizontal{
   border-radius:10px;
   background:#2769d9;
}
::-webkit-scrollbar-track-piece:horizontal{
   background-color: rgba(0,0,0,0.9);
   border-radius:10px;
}

Vediamo come funziona.

Pseudo-elementi

Questo è l’elenco degli pseudo-elementi, si tratta degli elementi che costituiscono la scrollbar:

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

Ognuno di questi elementi potrà esser personalizzato attraverso la scelta di dimensioni, color, bordi, ombre ecc.

Pseudo-classi

In più abbiamo a disposizione diverse pseudo-classi che ci permettono di impostare stili diversi in base allo “stato” della scrollbar, ecco alcuni esempi:

• :horizontal - ci riferiamo quelle scrollbar che hanno orientamento orizzontale;
• :vertical - ci riferiamo a quelle scrollbar che hanno orientamento verticale;
• :window-inactive – ci riferiamo alle scrollbar nel momento in cui la finestra del browser è inattiva.

L’elenco è ben più lungo e se siete interessati vi rimando a questo documento.