スクロールバーの美化効果を実現するための CSS3 のサンプル コード

/*スクロールバーの幅*/

    ::-webkit-スクロールバー{
        幅:9px;
        高さ:9px;
    }

/* 外側のトラック。 display:none を使用して非表示にしたり、背景画像を追加してディスプレイの色を変更したりできます*/

    ::-webkit-スクロールバートラック{
        幅: 6px;
        背景色:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        境界線の半径:2em;
    }

/*スクロールバーの設定*/

    ::-webkit-スクロールバー-サムネイル {
        背景色:#606d71;
        背景クリップ:パディングボックス;
        最小高さ:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        境界線の半径:2em;
    }
/*スクロールバーが移動する背景*/

    ::-webkit-スクロールバー-サムネイル:ホバー{
         背景色:#fff;
    }

::-webkit-スクロールバー { }
::-webkit-スクロールバーボタン { }
::-webkit-スクロールバートラック { }
::-webkit-スクロールバー-トラックピース { }
::-webkit-スクロールバー-サムネイル { }
::-webkit-スクロールバーコーナー { }
::-webkit-リサイザー { }