Blue Point Solutions

WebKitを使ってスクロールバーをカスタマイズ

一昔前、IE（5.5）などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素（<body>など）に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。

最近になって再びスクロールバーをカスタマイズすることが出来るようになりましたが、今回は非標準CSSではなくWebKitを使うことになります。プロパティはベンダープレフィックス（::-webkit-scrollbarなど）で、シャドウＤＯＭを使用しています。この方法が使われるようになって数年経ちますが、ディビッド・ハイアットさんが2009年の初めにブログで記事にしており、考え付くであろう全てのサンプルを掲載されています。

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。

オリジナルの記事デモ

Webkitスクロールバー

webkit scrollbar使用可能な疑似要素

下記のコードは疑似要素で、スクロールバーの個々のパーツにあたります。

::-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 */ }

webkitスクロールバー状態指定セレクタ

下記のコードは疑似クラスセレクタです。これらのセレクタを使って、スクロールバーの様々な状態を更に具体的に選択することが出来ます。

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

ここの部分はディビッドさんのブログの説明が完璧なので、丸々ぱくって日本語訳します：

（昨今この疑似クラスは::selectionにも同様に適用されるようになりました。そのうち新しい標準疑似クラスとして他のコンテンツでも適用するよう拡張する予定だそうです。）
:horizontal (水平方向)	水平方向の全てのパーツに適用されます。
:vertical (垂直方向)	垂直方向の全てのパーツに適用されます。
:decrement (減少疑似)	button（2）とtrack-piece（4）に適用され、垂直スクロールバーの上方向や水平スクロールバーの左方向等、それらのパーツが減少方向にあるかどうかを示します。
:increment (増加疑似)	button（2）とtrack-piece（4）に適用され、垂直スクロールバーの下方向や水平スクロールバーの右方向等、それらのパーツが増加方向にあるかどうかを示します。
:start (スタート疑似)	button（2）とtrack-pieces（4）に適用され、オブジェクトがthumb（5）より前に配置されているかどうかを示します。
:end （エンド疑似）	button（2）とtrack-pieces（4）に適用され、オブジェクトがthumb（5）より後ろに配置されているかどうかを示します。
:double-button (ダブルボタン疑似)	button（2）とtrack-pieces（4）に適用されます。buttonの場合は、そのbuttonがスクロールバーの同じ端にあるペアボタンの1つであるかを判断するのに使用されます。track-piecesの場合は、track-piecesがペアボタンと隣接するかどうかを示します。
:single-button (シングルボタン疑似)	button（2）とtrack-pieces（4）に適用されます。buttonの場合は、スクロールバーの端っこに単独で存在するボタンかどうかを判断します。track-piecesの場合は、単独のボタンと隣接するかどうかを示します。
:no-button (ノーボタン疑似)	track-pieces（4）に適用され、track-piecesがスクロールバーの一番端まで適用されるかどうかを示します。（すなわち、そのトラックの端にはボタンが存在しません。）
:corner-present (コーナー・プレゼント疑似)	全てのパーツに適用され、スクロールバーのcornerが存在するかどうかを示します。
:window-inactive (ウィンドウ・インアクティブ疑似)	全てのパーツに適用され、そのスクロールバーを含むウィンドウが現在アクティブであるかどうかを示します。

全てを組み合わせると・・・

実際に疑似要素と疑似クラスセレクタを組み合わせたサンプルを、幾つかご紹介しましょう：

	::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

簡単なサンプル

それではとてシンプルなカスタムスクロールバーを作ってみましょう：

	::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

これを垂直方向にオーバーフローしているテキストのdiv要素に、組み込んであげればよいのです：