このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSでスクロールバーをカスタマイズする“::-webkit-scrollbar”

記事Sep.25th, 2020
“::-webkit-scrollbar”疑似要素を使用してCSSだけでスクロールバーのデザインをカスタマイズする方法について解説します。

スクロールバーをカスタマイズ

CSSでスクロールバーのデザインをカスタマイズ

ブラウザのウィンドウや中身がはみ出した要素に表示されるスクロールバーはデフォルトでは味気ないものであったり、最近のブラウザではスクロールする時だけに表示されるものだったりしてウェブページを閲覧しているユーザーの環境によって見た目がバラバラです。

スクロールバーをウェブページのデザインにあったものにしたい場合や、ユーザーの環境によってスクロールバーの表示非表示が異なることでレイアウトが崩れてしまうのを防ぐために使用できるのが“::-webkit-scrollbar”疑似要素です。スクロールバーをカスタマイズする方法としては、スクリプトを使用して疑似的にスクロールバーを表示する方法などもありますが、“::-webkit-scrollbar”疑似要素を使用すればCSSの設定だけでスクロールバーのデザインを変更することができます。

なお、この“::-webkit-scrollbar”はCSSで標準化されているものではなくWebKitの独自拡張機能であるため、WebKitとWebKitから分岐したBlinkをHTMLレンダリングエンジンに採用しているブラウザでしか機能しません。

しかし、これらのブラウザにはSafari、Chrome、OperaやChromium版Edgeが含まれ、主要なブラウザではFirefox以外では機能させることができます。

::-webkit-scrollbar”疑似要素

::-webkit-scrollbar”疑似要素

擬似要素 説明
::-webkit-scrollbar スクロールバーの全体
::-webkit-scrollbar-button スクロールバーの矢印ボタン
::-webkit-scrollbar-thumb スクロールバーのつまみ
::-webkit-scrollbar-track スクロールバーの背景
::-webkit-scrollbar-track-piece スクロールバーの軌道
::-webkit-scrollbar-track-corner 水平と垂直のスクロールバーの交差部分
::-webkit-resizer サイズ変更用のつまみ

これらの疑似要素を使用するには最低限“::-webkit-scrollbar”が必要です。また、“::-webkit-resizer”以外は記述しなかった場合はその疑似要素が当てはまるパーツは表示されません。

width”プロパティheight”プロパティでスクロールバーの幅とボタンの大きさ、background”プロパティで色、他にもborder”プロパティbox-shadow”プロパティなどでデザインを変更することができます。

一部のパーツは重なって表示され、不要な時には表示されないものもあります。

スクロールバーのパーツの重なり方

シンプルなスクロールバーのサンプルコード

以下はシンプルなスクロールバーのサンプルコードです。

.scroll-box-1::-webkit-scrollbar {
width: 10px; /* 垂直方向のスクロールバーの幅 */
height: 10px; /* 水平方向のスクロールバーの幅 */
}

.scroll-box-1::-webkit-scrollbar-thumb {
background-color: rgb(150,150,150);
border-radius: 5px;
box-shadow: inset 3px 3px 3px rgba(255,255,255,0.2);
}

.scroll-box-1::-webkit-scrollbar-track {
background-color: rgb(220,220,220);
border-radius: 5px;
box-shadow: inset 3px -3px 5px rgba(0,0,0,0.2);
}

.scroll-box-1::-webkit-scrollbar-corner {
display: none;
}
吾輩は猫である。名前はまだ無い。どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー/\泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる/\して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう/\と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。

併せて使用できる疑似クラス

疑似要素に以下の疑似クラスを付加するとさらに細かくスクロールバーのデザインを設定することができます。

擬似クラス 説明 対象となるパーツ
:horizontal 垂直方向のスクロールバーに適用 すべて
:vertical 水平方向のスクロールバーに適用 すべて
:decrement パーツがスクロールバーの減少方向にある場合に適用 'button'
'track-piece'
:increment パーツがスクロールバーの増加方向にある場合に適用 'button'
'track-piece'
:start つまみよりも前の部分に適用 'button'
'track-piece'
:end つまみよりも後の部分に適用 'button'
'track-piece'
:double-button 両方向のボタンが一端にあるスクロールバーのボタン、もしくはそのボタンに接している軌道に適用 'button'
'track-piece'
:single-button 片方向のボタンが一端にあるスクロールバーのボタン、もしくはそのボタンに接している軌道に適用 'button'
'track-piece'
:no-button スクロールバーにボタンがない場合に適用 'track-piece'
:corner-present 水平と垂直のスクロールバーの交差部分がある場合に適用 すべて
:window-inactive スクロールバーを含むウィンドウがアクティブでない場合に適用 すべて

他にもCSSで標準化されている:enabled”疑似クラス:disabled”疑似クラス:hover”疑似クラス:active”疑似クラスが使用できます。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク