CSS3：scrollbarをカスタマイズする

[1] scrollbarの基本

まずは基本的な使い方から。

body{ scrollbar-base-color:#fff; }/* IE用スクロールバーカラー */
body::-webkit-scrollbar { width:10px; height: auto; }/* スクロールバー幅 */
body::-webkit-scrollbar-track { background: #000; }/* 背景 */
body::-webkit-scrollbar-thumb { background:#fff; }/* スクロールバー本体 */

これが基本形になります。それでは次からは実際に効果を付与していってみましょう。

[2] 実際にコーディングしてみる

次に当ブログで使っているCSSを見ていきましょう！

body{ scrollbar-base-color: #fcc800; }
body::-webkit-scrollbar{ width: 5px; height: auto; }
body::-webkit-scrollbar-track{ background: #455765; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); }
body::-webkit-scrollbar-thumb{ background:#fcc800; }

div{ scrollbar-base-color:#fcc800; }
div::-webkit-scrollbar { width: 3px; height: auto; }
div::-webkit-scrollbar-track { background: #455765; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); }
div::-webkit-scrollbar-thumb { background:#fcc800; }

bodyタグとdivタグで分けてあります。box要素などをスクロールさせる場合はちょっと細くなるようにしてあります。
何故かというと、この指定を入れるとスクロールバーが常時表示になってしまうので、同ページ内に配置された際にちょっと重複しちゃうんですよね。

ということで、あっという間ですが、たったこれだけでちょっと他と違った見せ方が可能です。参考までにどうぞ。