CSS:スクロールバースタイルの設定

Webkitスクロールバースタイルリセット
1、scrollbarはscrollbar buttonsとtrackを含む.trackはさらにtrack piecesとthumbに細分化される.trace piecesはthumbの上半分と下半分である.2、scrollbar cornerは横方向と縦方向の交差角領域3、resizeはスクロールバーの交差点で要素サイズを調整するための小さなコントロールをドラッグするために使用される
構成図は次のとおりです.
スクロールバーのカスタムスタイルが見つかると、ブラウザのデフォルトのスタイル設定は無効になり、cssで定義されたスタイルのみが使用されます.つまり、値はscrollbar buttonまたはscrollbar trackのみを個別に設定することはできません.

-webkit-scrollbar  /*        ，         */
-webkit-scrollbar-button  /*              */
-webkit-scrollbar-track /*       （  thumb trace-piece）*/
-webkit-scrollbar-track-piece /*          (  )  */
-webkit-scrollbar-thumb  /*         */
-webkit-scrollbar-corner /*           */
-webkit-resize //                        */

次の疑似クラスと組み合わせて設定できます(オペレーティングシステムブラウザのスクロールバーによって異なり、次の疑似クラスに基づいて設定できます).

:horizontal水平方向のtrack、track-piect、thumb

:vertica垂直方向のtrack、track-piect、thumb

:decrement上および左ボタンのbutton、上または左のtrack-piece

:increment下および右ボタンのbutton、下および右のtrack-piece

:startはbuttonsとtrack piecesに適用され、オブジェクト(buttonsまたはtrace piece)がスライダの前面に配置されているかどうか

.

:endはbuttonsとtrack piecesに適用され、オブジェクト(buttonsまたはtrace piece)がスライダの後ろに置かれているかどうか

.

:double-buttonはbuttonsとtrack piecesに適用され、軌道終了の位置はボタン

のペアであるかどうか

:single-buttonはbuttonsとtrack piecesに適用され、軌道の終了位置がボタン

であるかどうか

:no-buttonはtrack piecesに適用され、軌道終了位置にボタンがない

:corner-presentはすべてのscrollbarに適用され、スクロールバーの隅に

が存在するかどうか

:window-inactiveはすべてのscrollbarに適用され、スクロールバーを含む領域で、フォーカスがこのウィンドウにない場合

:enabled,:disabled,:hover,:activeこれらの偽クラスは

にも適用されます.
IEスクロールバースタイルリセット
IEではスクロールバーの色しか変更できません

scrollbar-arrow-color:#f2f2f3;  /*    */
scrollbar-track-color  /*     */
scrollbar-face-color   /*      ，  thumb*/
scrollbar-shadow-color /*      ,thubm border*/
scrollbar-highlight-color  /*       */
scrollbar-base-color /*         */

参考資料
Styling Scrollbars | Webkit