Stile custom per le scrollbar webkit

#CSS  

Quante volte ci sarà capitato di non voler vedere quelle brutte scrollbar di defautl dei browser web e pensare a come personalizzarle? Purtroppo con questo articolo non risolveremo dee tutto il problema in quanto a parte webkit gli altri browser non permettono la stilizzazione a meno di utilizzare pluing JavaScript appositi.

Attualmente il codice che vedremo, come detto, funziona sui browser con motore webkit tra cui Chrome, Safari e Opera.
In particolare vi sono sette pseudo elementi che è possibile stilizzare:

::-webkit-scrollbar{ 

}

::-webkit-scrollbar-button{  

}

::-webkit-scrollbar-track{ 
  background-color: yellow;
}
::-webkit-scrollbar-track-piece{ 

}

::-webkit-scrollbar-thumb{ 

}

::-webkit-scrollbar-corner{ 

}

::-webkit-resizer{ 

}

Usando Il codice così com'è nel vostro foglio di stile la personalizzazione verrà applicata a tutte le barre di scorrimento altrimenti è possibile far precedere i doppi "due punti" davanti ad un selettore css per applicarlo come ad esempio una classe, un div o un id.

Ci sono anche una serie di pseudo classi da poter applicare agli elementi precedenti:

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