Question

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

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

Answer 1

您可以对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解决方案。

Answer 2

你的css只能在IE浏览器中使用。而 hayk.mart 提供的css将在webkit浏览器中运行。通过使用不同的css hacks，你无法为浏览器设置滚动条的结果。

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

<强>解决方案：

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

See This Demo

如何使用css更改滚动条颜色

2 个答案: