CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明

::-webkit-スクロールバー  
{  
    幅: 6px;  
    高さ: 6px;  
    背景色: #F5F5F5;  
}

::-webkit-スクロールバー-トラック  
{  
    -webkit-box-shadow: インセット 0 0 6px rgba(0,0,0,0.3);  
    境界線の半径: 10px;  
    背景色: #FFF;  
}

::-webkit-スクロールバー-サムネイル  
{  
    境界線の半径: 10px;  
    -webkit-box-shadow: インセット 0 0 6px rgba(0,0,0,.3);  
    背景色: #AAA;  
}

:水平  
//horizo​​ntal疑似クラスは、任意の水平スクロールバーに適用されます: vertical  
//垂直疑似クラスは、垂直スクロールバーに適用されます: 減分  
// 減分疑似クラスはボタンとトラック ピースに適用されます。減少を表すボタンまたはトラックフラグメント。たとえば、領域を上または右に移動できる領域またはボタンなど: 増加  
// 増分疑似クラスはボタンとトラック ピースに適用されます。領域を下または左に移動できる領域またはボタンなどの増分ボタンまたはトラックフラグメントを示します: start  
//開始疑似クラスはボタンとトラックピースに適用されます。オブジェクト（ボタントラックフラグメント）がスライダーの前に配置されているかどうかを示します: end  
//end 疑似クラスはボタンとトラック ピースに適用されます。オブジェクト（ボタントラックフラグメント）がスライダーの後ろに配置されているかどうかを示します：ダブルボタン  
//ダブルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックがボタンのペアで終了するかどうかを決定します。つまり、軌道上の破片は一対のボタンの隣にあるのです。  
  
:シングルボタン  
// シングルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックの終わりがボタンであるかどうかを決定します。つまり、軌道フラグメントは別のボタンの隣にあります。  
  
:ボタンなし  
no-button 疑似クラスは、トラックの最後にボタンがないことを示します。  
  
:コーナープレゼント  
//コーナー存在疑似クラスは、スクロール バーのコーナーが存在するかどうかを示します。  
  
:ウィンドウ非アクティブ  
//すべてのスクロール バーに適用可能で、ウィンドウにフォーカスがない場合にスクロール バーを含む領域を示します。  
  
::-webkit-スクロールバー-トラックピース:開始{  
/スクロールバーの上部または左半分/  
}  
  
::-webkit-スクロールバー-サムネイル:ウィンドウ非アクティブ{  
/フォーカスが現在のエリアスライダー状態にない場合/  
}  
  
::-webkit-スクロールバーボタン:水平:減分:ホバー{  
/マウスが水平スクロールバーの下のボタン上にあるときの状態/  
}