Scrollbar personalizzata con webkit

Webkit affida nuovamente ai css la personalizzazione della scrollbar attraverso l'uso di alcuni pseudo-elementi. Vediamo di che si tratta.
Scrollbar personalizzata con webkit

Personalizziamo la nostra scrollbar

Il principale browser che permetteva la personalizzazione della scrollbar in css è stato il nostro caro ed amatissimo Internet Explorer (IE5.5 ?). Attualmente invece, per i browser moderni, si ricorre all’uso di javascript. Ad affidare nuovamente la personalizzazione ai fogli di stile ci ha pensato webkit attraverso l’uso di pseudo elementi.
Pare che siano disponibili già da un bel pò ma personalmente non ne ero a conoscenza, in ogni caso vediamo di che si tratta.

Pseudo elementi

Questo è l’elenco degli pseudo elementi, tutti ovviamente utilizzabili anteponendo il suffisso -webkit-.

  • 1. scrollbar
  • 2. scrollbar-button
  • 3. scrollbar-track
  • 4. scrollbar-track-piece
  • 5. scrollbar-thumb
  • 6. scrollbar-corner
  • 7. resizer

scrollbarpicture2

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    border-radius:10px; 
    background:#eee; 
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb{
    border-radius:10px; 
    background:#bbb;
}

Puoi sia referenziare il selettore prima dei due puntini, inserento un tag o una classe, oppure lasciarlo cosi com’è nell’esempio e verrà applicato in automatico a tutte le scrollbar presenti nella pagina.

Pseudo classi

Poi vi sono le pseudo classi. Queste, associate agli pseudo elementi, consentono di settare lo stile per i diversi stati della scrollbar.

  • :horizontal
  • :vertical
  • :decrement
  • :increment
  • :start
  • :end
  • :double-button
  • :single-button
  • :no-button
  • :corner-present
  • :window-inactive

Per una descrizione più approfondita puoi visitare questo link mentre di seguito puoi vedere un esempio di utilizzo:

::-webkit-scrollbar:horizontal{
    height:10px;
}

::-webkit-scrollbar-track:horizontal{
    background:#ddd; 
    box-shadow:none;
}

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github