::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color:#808080;
}
Perché gli attributi di larghezza e altezza non funzionano?Impossibile applicare larghezza e altezza a -webkit-scrollbar utilizzando CSS
width è per barre di scorrimento verticali e height riguarda barre di scorrimento orizzontali. Non è possibile definire l'altezza per una barra di scorrimento verticale. Questo dipende dalla dimensione del contenuto.
Se si desidera aggiungere immagini di sfondo alla vostra barra di scorrimento, si sono aggiunti come elementi normali:
::-webkit-scrollbar {
width: 50px;
height: 50px;
background:-webkit-linear-gradient(0, blue 50%, white 100%);
}
::-webkit-scrollbar-thumb {
background-color:#808080;
background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg");
}
questo funziona, fatta eccezione per il height
Esempio:http://jsfiddle.net/jasongennaro/gBrNf/
abbastanza certo che è perché il browser determina l'altezza della barra di scorrimento in base all'altezza del contenuto. (Più contenuto equivale a una barra di scorrimento più breve ... è uno stimolo visivo che non sono sicuro di poter ignorare.)
Hmm, quindi come faccio ad aggiungere immagini personalizzate alla classe webkit-scrollbar-thumb? –
per quello che ????? –
Sto provando a far scorrere il pollice della barra di scorrimento alla larghezza e all'altezza specificate. Inoltre, come posso utilizzare immagini personalizzate all'interno di una classe webkit-scrollbar-thumb? –
Verifica se uno qualsiasi dei CSS di esempio o dei collegamenti a ulteriori esempi di CSS in questa risposta ti aiuti: http://stackoverflow.com/questions/4641169/apple-like-scrollbars-using-css/4641257#4641257 – thirtydot