添加箭頭滾動條

Question

我想箭頭添加到滾動條的x和y軸，這裏是我的滾動條：http://jsfiddle.net/Nk3NH/ 我想對於兩個軸這個箭頭（圖片）：http://i.imgur.com/ygGobeC.png 我在尋找代碼添加箭頭而不是上下。

Answer 1

我已經玩了你。 首先，我將按鈕設置爲10px x 10px以使其更容易，並且通過指向左，右，上和下的10個箭頭創建4 10。 然後我將背景大小設置爲100％，以正確縮放它。 然後我使用，:increment,:decrement,:horizontal和:vertical選擇器爲每個按鈕設置正確的圖像。 圖片現在在我的公共收藏箱中，但您可以添加自己的圖片。

下面是更新後的代碼：http://jsfiddle.net/Nk3NH/2/

我寫的是這樣的代碼：

::-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); 
} 

編輯： 設法滾動按鈕旁邊彼此OP想加入這些樣式：

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

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

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

更新代碼的base64圖像，而不是斷開的鏈接：

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

Answer 2

只需添加：

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