添加箭头滚动条

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