html - 向滚动条添加箭头

Question

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

Answer 1

我一直在为你玩弄它。首先，我将按钮设置为 10px x 10px 以使其更容易，并创建了 4 个 10 x 10 箭头指向左、右、上和下。然后我将背景大小设置为 100%，以正确缩放它。然后我使用 :increment、:decrement、:horizo​​ntal 和 :vertical 为每个按钮设置正确的图像> 选择器。图片现在在我的公共(public) 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,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/