Unformed Building

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

公開:
更新:

パーマリンク

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

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

Surfin’ Safari - Blog Archive » Styling Scrollbars

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

これらを指定するときには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
「増加」という意味。
: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を指定します。

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

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

参考サイト

Surfin’ Safari - Blog Archive » Styling Scrollbars
各擬似要素・擬似クラスの説明とデモページ。
Creating custom scrollbars with CSS; How CSS isn’t great for every task on Dion Almaer’s Blog
::-webkit-scrollbarについての解説。
コメント欄で「画像はData URIを使うといいよ!」みたいなやり取りがあります。
less - ::-webkit-scrollbarをページ全体のスクロールバーに適用する
ページ全体に適用する際の注意点など。

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

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