CSS 3ブラウザスクロールバーを変更する

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 0px solid transparent;
  background-color:rgba(50,50,50,0.2)
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0,0,0,.3) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

CSS 3スクロールバー-webkit-scrollbar概要
Webkitでは、overflowプロパティを持つ領域、リストボックス、ドロップダウンメニュー、textareaのスクロールバーカスタムスタイルがサポートされます.
紹介をスキップしてdemoを直接見たい場合はdemoをクリックしてください
スクロールバーは、スタイルをカスタマイズできる擬似要素です.この擬似クラスは、webkit自体のスクロールバーレンダリングをオフにし、ユーザーがカスタマイズしたcss情報のみでレンダリングすることができます.例:
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
widthプロパティとheightプロパティは、縦スクロールバーの幅と横スクロールバーの高さをそれぞれ表します.%として指定することもできます.この場合、スクロールバーがウィンドウ全体に占める割合は次のようになります.
::-webkit-scrollbar {
width: 50%;
}
スクロールバーには、スクロールボタンとトラックが含まれます.レール自体にはさらに雰囲気のあるレール破片(track pieces)とスライダがあります.トラックフラグメント値スライダの上と下の領域.スクロールバーの角は、テキスト領域のサイズを調整するなど、さまざまなスタイルに設定されます.
スクロールバーのすべての擬似要素について説明します.
::-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*/}
フレーム、シャドウ、バックグラウンドピクチャなど、任意のオブジェクトを設定できます.作成したスクロールバーは、オペレーティングシステム自体の設定に従ってインタラクティブな動作を完了します.次の擬似クラスは、上の擬似要素に適用できます.
:horizontal(horizontal擬似クラスは任意の水平方向のスクロールバーに適用されます)
:vertical(vertical擬似クラスは垂直方向のスクロールバーに適用されます)
:decrement(decrement擬似クラスは、ボタンおよびトラックフラグメントに適用されます.減少したボタンまたはトラックフラグメントを表します.たとえば、領域を上または右に移動させることができる領域およびボタンなど).
:increment(increment擬似クラスは、ボタンおよびレールフラグメントに適用されます.領域を下または左に移動できる領域およびボタンなど、増分されたボタンまたはレールフラグメントを表します)
:start(start擬似クラスはボタンとレールの破片に適用されます.オブジェクト(ボタンレールの破片)がスライダの前に置かれているかどうかを示します)
:end(end擬似クラスはボタンとレールフラグメントに適用されます.オブジェクト(ボタンレールフラグメント)がスライダの後ろに置かれているかどうかを示します.
:double-button(double-button擬似クラスはボタンとレールフラグメントに適用されます.レールの終了位置がボタンのペアであるかどうかを判断します.つまり、レールフラグメントがペアに隣接するボタンです.)
:single-button(single-button擬似クラスはボタンとレールフラグメントに適用されます.レールの終了位置がボタンであるかどうかを判断します.つまり、レールフラグメントは個別のボタンに隣接しています.)
:no-button(no-button擬似クラスは軌道終了の位置にボタンがないことを示す.)
:corner-present(corner-present擬似クラスは、スクロールバーの隅が存在するかどうかを示します.)
:window-inactive(すべてのスクロールバーに適用され、スクロールバーを含む領域を表し、フォーカスがウィンドウにない場合)
::-webkit-scrollbar-track-piece:start{/*スクロールバー上半分または左半分*/}
::-webkit-scrollbar-thumb:window-inactive{/*現在の領域にフォーカスがないスライダの状態*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover{/*マウスが水平スクロールバーの下にあるボタンの状態*/
}