Quante volte abbiam pensato di modificere le orribili scrollbar di qualche brower? Una delle novità dei css3 è la possibilità di modificare la scrollbar (solamente su browser il cui motore sia webkit quindi su Chrome e Safari) attraverso un CSS Trick; quindi è possibile moficare la larghezza, altezza, colore di sfondo, ombre, bordi, ecc.

Purtroppo bisognerà aspettare ancora  per nuovi aggiornamenti dei browser oboleti in modo che introducano queste nuove funzioni. Vediamo insieme un esempio per modificare la scrollbar:

::-webkit-scrollbar{
    width:0.8em;
    height:0.8em;
background: #eaeaea;
margin-right: 10px;
}
::-webkit-scrollbar:hover{
    background-color:# eaeaea ;
border: none;
}
::-webkit-resizer{
    -webkit-border-radius:4px;
    background-color:#ccc;
border: none;
}
::-webkit-scrollbar-thumb{
    min-height:0.8em;
    min-width:0.8em;
    -webkit-border-radius:4px;
    background-color: #990754;
border: none;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #D80067;
border: none;
}
::-webkit-scrollbar-thumb:active{
    background-color:#990754;
border: none;
}

In particolare:

  •  :horizontal seleziona solo la scrollbar orizzontale;
  • :vertical seleziona solo la scrollbar verticale;
  • :decrement seleziona i pulsanti della scroll quando si rimpiccioliscono;
  • :increment seleziona i pulsanti della scroll quando si ingrandiscono;
  • :start seleziona la barra quando si trova in cima alla pagina;
  • :end seleziona la barra quando si trova in fondo alla pagina;
  • :double-button serve a selezionare una coppia di bottoni vicini tra di loro;
  • :single-button serve a selezionare un bottone quando è lontano dall’altro;
  • :no-button seleziona la scrollbar quando non è visibile;
  • :corner-present seleziona gli angoli presenti nella scrollbar;
  • :window-inactive seleziona la barra di scorrimento quando la finestra è inattiva.