41

我的 jsfiddle 在这里
我试图改变滚动条的颜色，但在这里它不起作用。

CSS：

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}​
4

2 回答 2

62

您可以为 webkit 使用以下属性，这些属性可以到达shadow DOM：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

这是一个带有红色滚动条的工作小提琴，基于this page解释问题的代码。

http://jsfiddle.net/hmartiro/Xck2A/1/

使用这个和您的解决方案，您可以处理除 Firefox 之外的所有浏览器，我认为此时仍然需要 javascript 解决方案。

于 2012-09-06T05:16:17.427 回答
16

你的 CSS 只能在 IE 浏览器中工作。hayk.mart 建议的 css将在 webkit 浏览器中运行。并且通过使用不同的 css hack，您无法使用相同的结果设置浏览器滚动条的样式。

因此，最好使用jQuery/Javascript插件来实现具有相同结果的跨浏览器解决方案。

解决方案：

通过使用jScrollPane一个 jQuery 插件，可以实现跨浏览器的解决方案

看这个演示

于 2012-09-06T05:34:58.927 回答