frecce Aggiunta di Scrollbar

Question

sto cercando di aggiungere frecce per le x e y assi della barra di scorrimento, ecco la mia barra di scorrimento: http://jsfiddle.net/Nk3NH/ E voglio che questa freccia (immagine) per i due assi: http://i.imgur.com/ygGobeC.png sto cercando il codice che aggiunge le frecce come quello e non su e giù.

Answer 1

Ho giocato intorno con esso per voi. Per prima cosa ho impostato i pulsanti 10px x 10px per renderlo più semplice e ho creato 4 10 10 frecce su 10 verso sinistra, destra, su e giù. Quindi ho impostato la dimensione dello sfondo su 100%, per ridimensionarla correttamente. Quindi ho impostato l'immagine corretta su ciascun pulsante utilizzando, i selettori :increment, :decrement, :horizontal e :vertical. Le immagini sono sul mio dropbox pubblico in questo momento, ma è possibile aggiungerne di proprie.

Ecco il codice aggiornato: http://jsfiddle.net/Nk3NH/2/

il codice che ho scritto è stato questo:

::-webkit-scrollbar-button { 
    background-size: 100%; 
    height: 10px; 
    width: 10px; 
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2); 
} 

::-webkit-scrollbar-button:horizontal:increment { 
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png); 
} 

::-webkit-scrollbar-button:horizontal:decrement { 
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png); 
} 

::-webkit-scrollbar-button:vertical:increment { 
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png); 
} 

::-webkit-scrollbar-button:vertical:decrement { 
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png); 
} 

EDIT: riusciti ad ottenere i pulsanti di scorrimento accanto all'altro come PO voluto con l'aggiunta di questi stili:

::-webkit-scrollbar-button:end { 
    display: block; 
} 

::-webkit-scrollbar-button:start { 
    display: none; 
} 

http://jsfiddle.net/Nk3NH/4/

codice aggiornato con le immagini base64 al posto dei collegamenti interrotti:

http://jsfiddle.net/burkybang/1z7vgfpt/

Answer 2

Basta aggiungere:

::-webkit-scrollbar-thumb { 
    background-image:url(http://i.imgur.com/ygGobeC.png); 
}