11

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

4

5 回答 5

27

我一直在为你玩弄它。首先，我将按钮设置为 10px x 10px 以使其更容易，并创建了 4 个 10 x 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/

于 2013-05-26T17:53:20.813 回答
8

我想做同样的事情，但不必为箭头使用背景图像。我的解决方案是使用重叠的背景渐变：

::-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;
}
于 2018-10-19T15:45:19.857 回答
5 
::-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/

于 2018-08-26T17:45:33.570 回答
0

因为这是在 Google 上找到的第一个解决方案，所以当您在一个滚动条上显示多个按钮时遇到问题，我将把这个答案留在这里。
您必须添加此行以隐藏额外的按钮：

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  width: 0;
  height: 0;
}
于 2020-05-18T07:11:34.903 回答
-2

只需添加： 

::-webkit-scrollbar-thumb {
    background-image:url( http://i.imgur.com/ygGobeC.png);
}
于 2013-05-26T17:32:40.693 回答