向滚动条添加箭头

Question

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

Answer 1

我一直在为你玩它.首先,我将按钮设置为10px x 10px以使其更容易,并创建4个10×10个箭头,指向左,右,上和下.然后我将background-size设置为100%,以正确缩放它.然后,我使用的正确的图像设置为每个按钮:increment,:decrement,:horizontal和: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,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

I wanted to do the same thing, but without having to use background-images for the arrows. My solution is to use overlapping background gradients:

::-webkit-scrollbar-button:vertical:start:decrement {
    background:
        linear-gradient(120deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

Answer 3

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,50 100,50 50,0'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,0 100,0 50,50'/></svg>");
}

http://jsfiddle.net/2aHeE/5227/