MENU
ブログメニュー
CSS
JavaScript
WordPress
コーダー
本紹介
生活・日常

【サンプル多数】CSSでスクロールバーをカスタマイズする方法

Web制作 CSS
  • URLをコピーしました！

こんにちは、こじ（@kojiWebCode）です。

今回は、スクロールバーのカスタマイズ方法をご紹介します。

本記事では、以下のようなお悩みを持つ方向けに解説します。

◆ スクロールバーに思うようにスタイルが当たらない…

◆ Firefoxで見たらスタイルが当たっていない…

◆ iOSでスクロールバーが常時表示されない…

◆ すべてのブラウザで共通の見た目になるようにしたい

結論から言うと、スクロールバーはブラウザの仕様に大きく左右されるので、デザインによってはすべてのブラウザで同じ見た目にすることは難しいです。

また、iOS13以降では、スクロールバーの常時表示ができない仕様になっています。

しかしクライアントからの要望で、すべてのブラウザでデザイン通りにして欲しいと言われることがあります。

私も以前、そのようなケースに遭遇したので、その場合の代替策も併せてご紹介します。

是非参考にしていただければ幸いです。

目次

スクロールバーをCSSでカスタマイズする際の注意点

スクロールバーはブラウザの仕様に大きく左右される

冒頭で述べたように、スクロールバーはブラウザの仕様に大きく左右されるので、すべてのブラウザで同じ見た目にすることは難しいです。

具体的には以下のような制限があります。

  • カスタマイズできるスクロールバーのスタイルが限られている
  • webkit系ブラウザとFirefoxでスタイルの指定方法が変わる
  • iOS13以降で、スクロールバーの常時表示は基本的に不可能

順番に説明します。

カスタマイズできるスクロールバーのスタイルが限られている

webkit系であれば、ある程度のスタイルはあてられると思いますが、Firefoxでは制限があります。

これは、そもそもスタイルをあてる際の記述方法が異なるからであり、Firefoxではwebkit系ほどプロパティ（擬似要素）が用意されていません。

webkit系ブラウザとFirefoxでスタイルの指定が変わる

先に述べた通り、webkit系のブラウザとFirefoxではスタイルのあて方が異なり、用意されているプロパティ（擬似要素）の数にも違いがあります。

その為、これらのブラウザで完全に同じ見た目にすることは難しい可能性があります。

シンプルな装飾であれば、同じにできると思いますが、少し凝ったデザインの場合は、なるべく近くなるようにスタイルをあてるという形になるかと思います。

iOS13以降で常時表示させるのは基本的に不可能

現行のiPhone（iOS13以降）の場合、スクロールバーを常時表示させることができません。

スクロールしている間は表示されるのですが、スクロールを止めて画面から指を離すと消える仕様となっています。

すべてのブラウザで共通の見た目にする方法【結論：JSライブラリを使用】

これまで述べた通り、ブラウザのデフォルトのスクロールバーをカスタマイズしようとすると、各ブラウザで別々のスタイルをあてる必要があるうえ、デザイン通りに仕上げることが難しい可能性があります。

『ブラウザ間で見た目に多少差異が出ても構わない』、『iPhoneではスクロールバーが常時表示されなくてもOK』という場合には、本記事の内容を参考にスタイルをあてるのが良いと思います。

一方で、『すべてのブラウザで見た目を統一したい』、『iPhoneでもスクロールバーを常時表示させたい』という場合には、デフォルトのスクロールバーのカスタマイズでは実現が難しいです。

その場合の代替策としては、JSライブラリを使用することが挙げられます。

私のおすすめは、『SimpleBar』です。

JSライブラリを使用することで、ブラウザ間に差異なくスクロールバーを表示できますし、iPhoneで表示されないということもありません。

本記事では、詳細な使い方については割愛しますが、是非導入を検討してみてください。

  • 近々、『SimpleBar』の使い方についてもまとめる予定です。

webkit系ブラウザのスタイル指定方法

webkit系のブラウザでは、以下の擬似要素を用いることによって各パーツのスタイルを装飾可能です。

最近のEdgeに関しても、この指定方法で同様にスタイルを変更できます。

擬似要素解説
::-webkit-scrollbarスクロールバー全体
::-webkit-scrollbar-track背景部分（トラック）
::-webkit-scrollbar-thumbつまみ（ハンドル）
::-webkit-scrollbar-button上下・左右のボタン
::-webkit-scrollbar-corner縦横のスクロールバーが重なる部分（右下の角部分）
::-webkit-scrollbar-track-pieceトラックのつまみ（ハンドル）で覆われていない部分
::-webkit-resizerリサイズ部分（ドラッグ可能なサイズ変更のハンドル）

以下を例にカスタマイズしていきます。

See the Pen 【CSS】スクロールバー⓪ by koji (@kojiWebCode) on CodePen.

スクロールバーのカスタマイズの基本

上記の中でも、頻繁に用いられるのは、以下の３つです。

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-thumb

幅や高さを変える：『::-webkit-scrollbar』

See the Pen 【CSS】スクロールバー：webkit_scrollbar by koji (@kojiWebCode) on CodePen.

スクロールバーの幅を指定するときは、::-webkit-scrollbarを用います。

縦スクロールバーの場合はwidthで、横スクロールバーの場合はheightで指定します。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  // スクロールバー（幅・高さ）
  &::-webkit-scrollbar {
    width: 20px; // 縦スクロールバーの幅
    height: 30px; // 横スクロールバーの幅
    background-color: #97AFC5; // 「track」に指定でもOK
    border-radius: 10px; // 「track」に指定でもOK
  }
}

その他にも、background-colorやborder-radiusなどもあてられますが、これらは::-webkit-scrollbar-trackでも指定可能です。

背景を変える：『::-webkit-scrollbar-track』

See the Pen 【CSS】スクロールバー：webkit_track by koji (@kojiWebCode) on CodePen.

背景部分（トラック）にスタイルをあてる場合は、::-webkit-scrollbar-trackを用います。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  &::-webkit-scrollbar {
    width: 20px;
    height: 20px;
  }
  
  // スクロールバーの背景
  &::-webkit-scrollbar-track {
    background-color: #C9BDA6;
    border-radius: 20px;
  }
}
  • ::-webkit-scrollbarで、widthもしくはheightを指定しないとスタイルが適用されないので注意が必要です。

つまみ部分を変える：『::-webkit-scrollbar-thumb』

See the Pen 【CSS】スクロールバー：webkit_thumb by koji (@kojiWebCode) on CodePen.

つまみ部分にスタイルをあてる場合は、::-webkit-scrollbar-thumbを用います。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  &::-webkit-scrollbar {
    width: 30px;
    height: 20px;
  }
  
  // スクロールバーのつまみ
  &::-webkit-scrollbar-thumb {
    background-color: #C792A3;
    border-radius: 10px;
  }
}
  • ::-webkit-scrollbarで、widthもしくはheightを指定しないとスタイルが適用されないので注意が必要です。

カスタマイズ例

See the Pen 【CSS】スクロールバー：webkit_base_all by koji (@kojiWebCode) on CodePen.

今までに紹介したものを組み合わせました。

ここで、お伝えしたい点は下記の内容になります。

  • -webkit-scrollbarと-webkit-scrollbar-trackの背景は別々でつけられるので、上のように重ねることも可能。
  • 背景は、グラデーションも画像もOK
  • スクロールバーのトラックに影をつけることも可能

他にも出来ることはあるかと思います。ご自身で色々とお試しいただければと思います。

【応用】その他のカスタマイズ例

上下・左右のボタンを変える：『::-webkit-scrollbar-button』

See the Pen 【CSS】スクロールバー：webkit_button by koji (@kojiWebCode) on CodePen.

ボタンにスタイルをあてる場合は、::-webkit-scrollbar-buttonを用います。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  &::-webkit-scrollbar {
    width: 30px;
    height: 30px;
  }
  
  // ボタン  
  &::-webkit-scrollbar-button {
    background-color: #9C8EA2;
    border: 5px solid #000;
    width: 40px; // 水平方向のボタンの横幅
    height: 60px; // 垂直方向のボタンの縦幅
  }
}

これまで同様、枠線・背景等を指定可能です。

また、widthで水平方向のボタンの横幅を、heightで垂直方向のボタンの縦幅を変更可能です。

  • ::-webkit-scrollbarで、widthもしくはheightを指定しないとスタイルが適用されないので注意が必要です。

右下の角部分を変える：『::-webkit-scrollbar-corner』

See the Pen 【CSS】スクロールバー：webkit_corner by koji (@kojiWebCode) on CodePen.

右下の角部分にスタイルをあてる場合は、::-webkit-scrollbar-cornerを用います。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  // コーナー  
  &::-webkit-scrollbar-corner {
    border: 5px solid #97AFC5;
    background-color: #000;
  }
}
  • ::-webkit-scrollbarで、widthもしくはheightを指定しなくてもスタイルは適用されます。

トラックのつまみで覆われていない部分を変える：『::-webkit-scrollbar-track-piece』

See the Pen 【CSS】スクロールバー：webkit_track-piece① by koji (@kojiWebCode) on CodePen.

::-webkit-scrollbar-track-pieceのイメージが難しいのですが、上はボーダーのみスタイルをあてた場合です。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  &::-webkit-scrollbar {
    width: 30px;
    height: 30px;
  }
  
  // トラックピース
  &::-webkit-scrollbar-track-piece {
    border: 5px solid #97AFC5;
  }
}

中にある薄青の線は何？って感じだと思います。これは、つまみにスタイルをあてると理解しやすいです。

See the Pen 【CSS】スクロールバー：webkit_track-piece② by koji (@kojiWebCode) on CodePen.

赤枠部分がつまみです。このように見ると、中の薄青の線はつまみの中央位置であることがわかります。

::-webkit-scrollbar-track-pieceは、つまみの中央を境にトラックを2つのピース（要素）に分けているイメージでしょうか（間違っていたらすみません）。

以降で説明しますが、この2つのピースは別々のスタイルをあてることが可能です。

リサイズ部分を変える：『::-webkit-resizer』

See the Pen 【CSS】スクロールバー：webkit_resizer by koji (@kojiWebCode) on CodePen.

リサイズ部分にスタイルをあてる場合は、::-webkit-resizerを用います。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  resize: both; // リサイズ
 
  // コーナー
  &::-webkit-scrollbar-corner {
    // このスタイルは見えない（resizeを外すと見える）
    background-color: blue; 
  }
  
  // リサイザー
  &::-webkit-resizer {
    background-color: red;
    border: 5px solid orange;
  }
}

『::-webkit-resizer』と『::-webkit-scrollbar-corner』は、いずれもコーナーの位置のスタイルになります。

同じ位置なので、若干分かりづらいのですが、resizeが指定されていて、リサイズが可能な場合は、『::-webkit-resizer』のスタイルが適用されます（『::-webkit-scrollbar-corner』のスタイルを同時にあてても、リサイズ部分が上に乗っかっているような状態なので『::-webkit-scrollbar-corner』のスタイルは見えません）。

一方で、resizeが許可されていない場合は、『::-webkit-scrollbar-corner』のスタイルが見えるという感じです。

  • ::-webkit-scrollbarで、widthもしくはheightを指定しなくてもスタイルは適用されます。

水平・垂直 / 増加・減少を指定する擬似クラス

擬似クラス解説
:horizontal水平方向を指定
:vertical垂直方向を指定
:decrement減少方向にあるパーツのスタイルを指定
:increment増加方向にあるパーツのスタイルを指定
:startパーツの前方部分（開始位置）を指定
:endパーツの後方部分（終了位置）を指定

buttonに水平・垂直 / 増加・減少の区別をつける

See the Pen 【CSS】スクロールバー：pseudo-classes_webkit_button① by koji (@kojiWebCode) on CodePen.

水平方向のボタンの背景を黄色、垂直方向の背景を緑色にしています。

また、増加方向のボタンを赤枠で囲み、減少方向のボタンを青枠で囲んでいます。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;
  
  &::-webkit-scrollbar {
    width: 30px;
    height: 30px;
  }
  
  &::-webkit-scrollbar-button {
    // 水平方向
    &:horizontal {
      background-color: yellow;
    }
    // 垂直方向
    &:vertical {
      background-color: green;
    }
    // 増加方向
    &:increment {
      border: 4px solid red;
    }
    // 減少方向
    &:decrement {
      border: 4px solid blue;
    }
  }
}

もしくは、:increment / :decrementの代わりに、:start / :endを用いてもOKです。

See the Pen 【CSS】スクロールバー：pseudo-classes_webkit_button② by koji (@kojiWebCode) on CodePen. 

.sample {
  &::-webkit-scrollbar-button {
    // 前方（開始位置）
    &:start {
      border: 4px solid skyblue;
    }
    // 後方（終了位置）
    &:end {
      border: 4px solid gold;
    }
  }
}

前方（開始位置）のボタンを水色の枠で囲み、後方（終了位置）のボタンを金色の枠で囲んでいます。

track-pieceに水平・垂直 / 増加・減少の区別をつける

See the Pen 【CSS】スクロールバー：pseudo-classes_webkit_track-piece① by koji (@kojiWebCode) on CodePen.

ボタンの時と同様です。

水平方向のトラックを黄色、垂直方向のトラックを緑色にしています。

また、トラックの左側（上側）を青枠で囲み、右側（下側）を赤枠で囲んでいます。

.sample {
  border: 3px solid #7BA4A8;
  margin-inline: auto;
  width: 90%;
  height: 300px;
  overflow: scroll;

  &::-webkit-scrollbar {
    width: 30px;
    height: 30px;
  }
  
  &::-webkit-scrollbar-track-piece {
    // 水平方向
    &:horizontal {
      background-color: yellow;
    }
    // 垂直方向
    &:vertical {
      background-color: green;
    }
    // 増加方向
    &:increment {
      border: 4px solid red;
    }
    // 減少方向
    &:decrement {
      border: 4px solid blue;
    }
  }
}

もしくは、:increment / :decrementの代わりに、:start / :endを用いてもOKです。

See the Pen 【CSS】スクロールバー：pseudo-classes_webkit_track-piece② by koji (@kojiWebCode) on CodePen. 

.sample {
  &::-webkit-scrollbar-track-piece {
    // 前方（開始位置）
    &:start {
      border: 4px solid skyblue;
    }
    // 後方（終了位置）
    &:end {
      border: 4px solid gold;
    }
  }
}

トラックの左側（上側）を水色の枠で囲み、右側（下側）を金色の枠で囲んでいます。

擬似クラスを使ったカスタマイズ例

See the Pen 【CSS】スクロールバー：pseudo-classes_webkit_all by koji (@kojiWebCode) on CodePen.

Firefox独自のスタイル指定方法

Firefoxでは、以下のプロパティを用いることによって各パーツのスタイルが変更可能です。

プロパティ解説
scrollbar-widthスクロールバーの幅（太さ）
scrollbar-colorスクロールバーのトラックとつまみの色

【Firerfox】スクロールバーのカスタマイズの基本

以下は、Firefoxで開いて確認してください。

See the Pen 【CSS】スクロールバー：firefox_all by koji (@kojiWebCode) on CodePen.

スクロールバーの幅：『scrollbar-width』

スクロールバーの幅は、scrollbar-widthで指定可能です。

初期値はauto、細くしたい場合にはthinを指定します。また、noneを指定すると、非表示になります。

.sample {  
  scrollbar-width: thin;
}

スクロールバーの色：『scrollbar-color』

スクロールバーのつまみとトラック部分は、scrollbar-colorで指定可能です。

これらは一括で指定でき、値の1つ目がつまみの色で、2つ目がトラックの色になります。

.sample {  
  scrollbar-color: orange skyblue; // つまみ：オレンジ色、トラック：水色
}

尚、webkit系のように、サイズを指定したり、枠線、影などをつけることは出来ません。

スクロールバーを非表示にする方法

See the Pen 【CSS】スクロールバー：非表示 by koji (@kojiWebCode) on CodePen.

スクロールバーを非表示にする方法もブラウザによって異なります。

webkit系 + Edge

.sample::-webkit-scrollbar {
    display: none;
}

Firefox

.sample {
    scrollbar-width: none;
}

【補足】現行のEdgeでは以前のプロパティは効かない

現行のEdgeでスクロールバーを非表示にする場合、webkit系の指定方法と同じになります。

IE・旧版のEdgeで使用していた、以下のプロパティを指定してもスクロールバーは非表示にならないので注意が必要です。

.sample {
    -ms-overflow-style: none;
}

まとめ

本記事では、スクロールバーのカスタマイズ方法をご紹介しました。

ブラウザによってカスタマイズできる範囲に制限があることを理解しておく必要があります。

スクロールバーのカスタマイズの頻度は多くありませんが、必要な場合は是非参考にしていただければ幸いです。

以上になります。最後までお読みいただきありがとうございました。

ホームページに関するお困りごとがございましたら、お気軽にご相談ください！

KojiLog
お問い合わせ | KojiLog 当ブログのお問い合わせページです。お仕事のご依頼や、記事の誤字脱字につきましては、当フォームよりご連絡ください。

TwitterのDMからもご相談を承っております。

Web制作 CSS

この記事が気に入ったら
フォローしてね！

よかったらシェアお願いします！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次