自定义 Webkit 滚动条按钮

Question

我正在努力弄清如何使webkit滚动条按钮出现。 我在Mac上的Safari上进行测试。

我阅读了这些指南，但是我无论如何都无法弄清楚如何让一个简单的按钮使其向上和向下移动。我有一个图像应该模拟，但不知道如何操作。可以使用图像作为按钮吗？ 图像示例

!(http://oi62.tinypic.com/28kh76a.jpg)

http://css-tricks.com/custom-scrollbars-in-webkit/

到目前为止有这个..

::-webkit-scrollbar {  
width: 12px;  
}  

::-webkit-scrollbar-track {
background-color: #fff;  
}

::-webkit-scrollbar-thumb {  
background-color: #81CFCC;  
height: 10px;

但不知道如何获取上下滚动按钮，或如何为它们设置样式。

- Clam

Answer 1

使用::-webkit-scrollbar-button选择器，并将其display属性设置为block。直到我设置它们的display属性，才会出现按钮。

- Brian Whitton

---

存在兼容性问题。webkit-scrollbar-button 仅适用于 Chrome、Opera 和 Safari，而不适用于 Firefox 或 Edge/IE。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar - Quidam

Answer 2

请参考这篇文章，它包含了所有关于 WebKit 滚动条的知识。 WebKit 中的自定义滚动条 - Css Tricks 编辑 1

你可以尝试像这样做：

::-webkit-scrollbar-button {
  background: #444;
}

编辑2

希望这能在某种程度上帮助到你

http://jsfiddle.net/vfmfmaxo/

- Blake

---

嗯，那篇文章和我发布的一样。它并没有回答我的问题，即按钮部分有哪些可能性或如何进行样式设置。 - Clam

哦，对不起，我没看到你发的那个帖子，请看编辑1。 - Blake

但我不明白，箭头在哪里？ - windmaomao