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

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

これらを指定するときには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をページ全体のスクロールバーに適用する

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