html – 向滚动条添加箭头

我正在尝试将箭头添加到滚动条的x和y轴,这是我的滚动条： http://jsfiddle.net/Nk3NH/
我想要两个轴的箭头(图像)： http://i.imgur.com/ygGobeC.png
我正在寻找像这样添加箭头而不是上下的代码.

解决方法

我一直在为你玩它.
首先,我将按钮设置为10px x 10px以使其更容易,并创建4个10×10个箭头,指向左,右,上和下.
然后我将background-size设置为100％,以正确缩放它.
然后我使用：increment,：decrement,：horizo​​ntal和：vertical选择器为每个按钮设置正确的图像.
图像现在在我的公共DropBox上,但您可以添加自己的图像.

这是更新的代码：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.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/

原文地址：https://www.jb51.cc/html/225305.html