Hinzufügen von Pfeilen Scrollbar

Question

Ich versuche Pfeile hinzufügen, um die x und y Achsen der Scrollbar, hier ist meine Scrollbar: http://jsfiddle.net/Nk3NH/ Und ich möchte diesen Pfeil (Bild) für die beiden Achsen: http://i.imgur.com/ygGobeC.png Ich suche der Code, der die Pfeile wie das hinzufügen und nicht auf und ab.

Answer 1

Ich habe es für Sie herum spielen. Zuerst habe ich die Tasten 10px x 10px, um es einfacher zu machen, und erstellt 4 10 von 10 Pfeile nach links, rechts, oben und unten. Dann setze ich die Hintergrundgröße auf 100%, um sie richtig zu skalieren. Dann stelle ich das richtige Bild für jede Taste mit den :increment, :decrement, :horizontal und :vertical Selektoren. Die Bilder sind jetzt in meiner öffentlichen Dropbox, aber Sie können Ihre eigenen hinzufügen.

Hier ist der aktualisierte Code: http://jsfiddle.net/Nk3NH/2/

der Code, den ich geschrieben war:

::-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: die Scroll-Tasten Managed nebeneinander zu bekommen, wie OP durch das Hinzufügen dieser Arten wollte:

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

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

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

aktualisiert Code mit Base64-Bilder statt defekte Links:

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

Answer 2

Fügen Sie einfach:

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