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

シャドウDOMに到達するWebkitには、次の属性を使用できます。

::-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 */ }

これは、問題を説明するこのページのコードに基づいた、赤いスクロールバーを備えた実用的なフィドルです。

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

これとあなたのソリューションを使用すると、Firefoxを除くすべてのブラウザを処理できます。Firefoxは、現時点ではまだjavascriptソリューションが必要だと思います。

于 2012-09-06T05:16:17.427 に答える
16

cssはIEブラウザでのみ機能します。そして、hayk.martによって提案されたcssは、Webkitブラウザーで動作します。また、さまざまなcssハックを使用することで、ブラウザのスクロールバーのスタイルを設定して同じ結果を得ることができません。

したがって、jQuery / Javascriptプラグインを使用して、同じ結果のクロスブラウザソリューションを実現することをお勧めします。

解決：

jScrollPane jQueryプラグインを使用することで、クロスブラウザソリューションを実現できます

このデモを見る

于 2012-09-06T05:34:58.927 に答える