スクロールバーをデザインする ::-webkit-scrollbar に関しての覚え書き

Category : CSS

Google Chrome, Safari, Lunascape Webkit など、webkit 系ブラウザで利用できる ::-webkit-scrollbar 擬似要素に関する覚え書きです。
これはその名の通り、スクロールバーをデザインするときに使います。

基本的な説明は Safari のブログに書かれていますので、そちらを参考にしました。
また、この記事で説明に使っているキャプチャ画像は、Safari のデモページのものです。

スクロールバーのパーツを構成する擬似要素

これらを指定するときには webkit 用のベンダープレフィクス -webkit- を忘れないようにしましょう。

::-webkit-scrollbar
width で縦スクロールバーの幅、height で横スクロールバーの高さを指定します。
パーセント指定も可能です。
スクロールバーは後述する button と track で構成されます。
::-webkit-scrollbar-button
Windows の場合だとスクロールバーの一番上と一番下にでる、クリックすることで少しだけスクロールできるボタンです。
::-webkit-scrollbar-track
track は、track-piece と thumb で構成されます。
::-webkit-scrollbar-track-piece
track 部分で、thumb の上下にあるエリアです。
::-webkit-scrollbar-thumb
track 部分にある、移動するパーツです。
::-webkit-scrollbar-corner
縦スクロールバーと横スクロールバーの間にあるエリアで、両方のスクロールバーが表示されるとき、または resizer が表示されるときに使用されます。
::-webkit-resizer
webkit ブラウザでテキストエリアの右下に出てくる、リサイズ可能であることを示すエリアです。
resize: both/vertical/horaizontal; が指定されている要素に使用されます。

簡単ではありますが、図で表すと以下のようになります。
この場合、resizer は corner 内にある斜めのストライプ模様になります。

スクロールバーのパーツを構成する擬似要素の図解

擬似クラスについて

上記の擬似要素の後に指定できる擬似クラスです。

:horizontal
横スクロールバーに適用されます。
:vertical
縦スクロールバーに適用されます。
:decrement
button と track-piece に適用される擬似クラスです。"decrement" は「減少」という意味ですね。
スクロール位置が減少される button と track-piece かどうかを示します。
縦スクロールバーの上方向、横スクロールバーの左方向です。
:increment
"increment" は「増加」という意味。
:decrement の逆です。
:start
button と track-piece に適用される擬似クラスです。
オブジェクトが thumb より前にあるかどうかを示します。
:end
:start の逆で、オブジェクトが thumb より後にあるかどうかを示します。
:double-button
button と track-piece に適用される擬似クラスです。
これは、button がスクロールバーの同じ端にあるペアの button の1つであるかを判断するのに使用します。
track-piece に使用する場合には、track-piece がペアの button に接するかどうかを示します。
:single-button
button と track-piece に適用される擬似クラスです。
これは、button がスクロールバーの端にある単独のものであるかを判断するのに使用します。
track-piece に使用する場合には、track-piece が1つの button に接するかどうかを示します。
:no-button
track-piece に適用される擬似クラスで、track-piece がスクロールバーの一番端まであるかどうか(スクロールバーの端に button が存在しない)を示します。
:corner-present
スクロールバーの全てのパーツに適用される擬似クラスです。
スクロールバーの corner が存在するかどうかを示します。
:window-inactive
スクロールバーの全てのパーツに適用される擬似クラスです。
スクロールバーが表示されているウィンドウがアクティブであるかどうかを示します。
(補足で、開発版では ::selection にも適用できるよ、とか、この擬似クラスに関する予定も書かれています。詳しくは原文参照)

また、上記の擬似クラス以外にも、:hover, :active, :enabled, :disabled といった擬似クラスが指定できます。
特定部分を非表示にするには display: none; を指定します。

上記を当てはめると以下のようになります。

スクロールバーの擬似クラスについての簡単な説明 1

スクロールバーの擬似クラスについての簡単な説明 2

その他の擬似クラスなどについては、Safari のページにあるデモで確認してみてください。
HTML ソースに CSS も書かれています。

参考サイト

各擬似要素・擬似クラスの説明とデモページ。

::-webkit-scrollbar についての解説。
コメント欄で「画像は data URI を使うといいよ!」みたいなやり取りがあります。

ページ全体に適用する際の注意点など。

書いてみて思ったのは、指定がすごくややこしいということ。
使いこなすには何回か作ってみないといけないですね……。
CSS3 で色々指定できるので画像を使わなくてもボタンとリサイザー以外はそれなりのものが作れます。
-webkit-gradient, -webkit-border-radius などですね。

あと、デフォルトのスクロールバーを変更されることに強い抵抗を覚える方もいますので、使いどころは考えたほうがいいかもしれません。
個人的にはニュースティッカーとか、ブログのサイドバーにちょこっとあるくらいだと可愛いんじゃないかなーと思います。

Trackbacks & Pingbacks

Leave a Reply