Html 向滚动条添加箭头

我正在尝试向滚动条的

x

和

y

轴添加箭头，这是我的滚动条： 我想要两个轴的箭头（图）： 我正在寻找这样添加箭头而不是上下箭头的代码。

只需添加：

::-webkit-scrollbar-thumb {
    background-image:url( http://i.imgur.com/ygGobeC.png);
}

---

我一直在为你摆弄它。 首先，我将按钮设置为10px 10px以使其更简单，并创建了4个10乘10的箭头，分别指向左、右、上和下。 然后我将背景大小设置为100%，以正确缩放它。 然后我使用

:increment

、

:decrement

、

:horizontal

和

:vertical

选择器为每个按钮设置正确的图像。 这些图片现在在我的公共dropbox上，但是你可以添加你自己的

以下是更新的代码：

我写的代码是：

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

使用base64映像而不是断开的链接更新了代码：

：：-webkit滚动条按钮：垂直：递减{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}
：-webkit滚动条按钮：垂直：增量{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

---

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

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

---

因为这是在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;
}

---

不幸的是，这是一个不完整的代码，因为它在上下两个方向的两个轴上添加了相同的图像，这并不完全是我想要的关于这个问题的答案，但是这个答案帮助我解决了关于css拇指图像的问题。。。谢谢，顺便说一句……对不起，这个代码并不是我所需要的，因为我希望我说的按钮是这样的：如果你这么做了，我会给你20个名声……是的，我知道这是你自己写的，别担心，如果你按照我的要求去做，你会因此得到20个名声；）对不起，我被误解了一会儿对不起，我已经试了很久了，好像拿不到双按钮，我可能明天再试一次（很高兴，我自己也学到了很多关于WebKit滚动条的知识。这是我最喜欢的解决方案，因为它可以处理动态生成的简单矢量图形。

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