【HMTL/CSS】overflow: scrollのスクロールバーをカスタマイズする

今回はHMTLとCSSでoverflow: scrollのスクロールバーをカスタマイズする方法について解説します。

この方法を知ることで、基本のデザインから見た目を変更することができ、サイトの雰囲気に合わせたスクロールバーを作成することができます。

一緒に理解を深めていきましょう。

最終的なコードと実装デモ
スクロールバーを表示する
スクロールバーの装飾
iOS Safariでスクロールバーを変更する方法
- SimpleBarとは？
- SimpleBarの使い方
まとめ

最終的なコードと実装デモ

最初に今回作成したスクロールバーに関するコードを全て載せます。

HTML

<div class="container">
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
  <article>
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </article>
</div>

CSS

.container {
  width: 300px;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid#333;
}

article {
  padding: 8px 40px;
  background-color: #eee;
}

article+article {
  border-top: 2px dashed #fff;
}

.container::-webkit-scrollbar {
  width: 16px;
}

.container::-webkit-scrollbar-track {
  background-color: #fff;
}

.container::-webkit-scrollbar-thumb {
  background-color: #3760d0;
  border-radius: 8px;
}

DEMO

上記コードのデモ画面です。

デモ

それでは、スクロールバーのカスタマイズ方法を一つずつ見ていきましょう。

スクロールバーを表示する

まず、スクロールバーを表示するために枠となる要素の縦と横のサイズをCSSで指定します。

.container {
  width: 300px;
  height: 400px;
}

今回はスクロールバーを表示したいので、指定したサイズから縦にはみ出るようにコンテンツの量を調節します。

その後、枠となる要素にスクロールバーを表示するためのプロパティを記述します。

.container {
  overflow-y: scroll;
}

overflow-yは縦方向にはみ出た場合の処理を指定できます。

今回はスクロールバーを表示したいのでoverflow-y: scrollを指定します。

わかりやすいように枠をつけ、セクションごとに背景色と点線をつけてブラウザで確認するとこのように表示されました。

スクロールバーを表示することができました。

スクロールするとバーが上下に動き、内容が見えるようになっています。

スクロールバーの装飾

スクロールバーを表示することができたので、次は装飾をしてみましょう。

基本のスクロールバーでも十分に機能を果たしますが、サイトの雰囲気を統一させたい場合は見た目を変更できるとより良いです。

その時、3つのプロパティを使用します。

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

ただし、これら3つの疑似要素はFirefoxには対応していません。

また、iOS版のSafariでは ::-webkit-scrollbar-thumb や ::-webkit-scrollbar-track が対応していません。

“::-webkit-scrollbar” | Can I use… Support tables for HTML5, CSS3, etc

Firefoxに対応させるためには下の2つのプロパティを使用します。

scrollbar-width
scrollbar-color

iOS Safariでスクロールバーを変更するには、JavaScriptライブラリを活用する方法がありますが、少し話がそれてしまいますので、それは下記、この記事の最後にご紹介しています。

iOS Safariでスクロールバーを変更する方法

それでは、これらの疑似要素・プロパティについて一つずつ見ていきましょう。

::-webkit-scrollbar

::-webkit-scrollbarは、スクロールバー全体を変更する場合に使用します。

主にスクロールバー全体の大きさをwidthやheightを使用して指定します。

/* CSS */
.container::-webkit-scrollbar {
  width: 16px;
}

試しにwidth:100pxを指定してみたら下の画像のようになりました。

スクロールバー全体のサイズが変わったことがわかりましたね。

::-webkit-scrollbar-track

::-webkit-scrollbar-trackは、スクロールバーの中のバーが移動する部分とバーの見た目を変更する際に使用します。

「track」は英語で通り道という意味があり、この場合は背景色を指定すると良いでしょう。

/* CSS */
.container::-webkit-scrollbar-track {
  background-color: #fff;
}

試しに、background-color: #f4f9b9;を指定し、背景色を薄い黄色にしてみると画像のようになりました。

バーの通り道の箇所が指定した薄い黄色（#f4f9b9）に変更されました。

::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumbは、スクロールバーの中の移動できるバー（つまみ）の見た目を変更する際に使用します。

「thumb」は英語で「親指を使って触る」という意味もあるようなので、英語から連想させると覚えやすそうです。

つまみ部分の色や形を変更したい場合はこの疑似要素に指定します。

/* CSS */
.container::-webkit-scrollbar-thumb {
  background-color: #3760d0;
  border-radius: 8px;
}

つまみの色が青（#3760d0）になり、角が丸くなりました。

FirefoxとSafari on iOS 以外はこれで完成です。次にFirefoxを対応させる場合を見ていきます。

scrollbar-width/scrollbar-color(Firefox対応)

上記3つの疑似要素はFirefoxでは反映されません。

Firefoxでも同じように反映させるためにはscrollbar-width、scrollbar-colorプロパティを使用します。

/* CSS */
.container {
  scrollbar-width: 16px;
  scrollbar-color: #3760d0;
}

注意点は、角丸や高さの指定ができないことです。

3つの疑似要素よりも細かいカスタマイズができないのでその点は頭に入れておきましょう。

できるだけブラウザ間で差がないように見た目を整えられたら良いと思います。

次にSafari on iOS の対応です。

iOS Safariでスクロールバーを変更する方法

iOS Safari では ::-webkit-scrollbar などの CSS を使ったカスタマイズが適用されません。

そのため、スクロールバーのデザインを変更するには別のアプローチが必要になります。

特にすべてのブラウザで統一したスクロールバーを表示するには、JavaScriptライブラリを活用するのが最も確実な方法です。

そこで、本記事では「SimpleBar」という軽量なライブラリを紹介します。

SimpleBarとは？

SimpleBar は、CSS と JavaScript を使ってネイティブのスクロールを維持しながら、カスタムスクロールバーを実装できるライブラリです。

このライブラリを使うことで、iOS Safari でもスクロールバーをデザイン変更できるようになります。

SimpleBarの使い方

CDNを使って取得します。

<!-- SimpleBarのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">

<!-- SimpleBarのJS -->
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

HTML

設定したいタグに data-simplebar を追加するだけです。

<body>
    <div class="container" data-simplebar>
        <article>
            <h2 class="title">タイトル</h2>
            <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </article>
        <article>
            <h2 class="title">タイトル</h2>
            <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </article>
        <article>
            <h2 class="title">タイトル</h2>
            <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </article>
    </div>
</body>

CSS

SimpleBarのカスタムスタイルを適用します。

.container {
    width: 300px;
    height: 400px;
    overflow-y: auto; /* SimpleBarを適用するために auto に変更 */
    border: 1px solid #333;
}

article {
    padding: 8px 40px;
    background-color: #eee;
}

article + article {
    border-top: 2px dashed #fff;
}

/* SimpleBarのカスタムスタイル */
.container .simplebar-scrollbar {
    background-color: #3760d0 !important;
    border-radius: 13px;
}

.container .simplebar-track {
    background-color: #fff;
}

こちらのデモをご覧ください。

CSSで作ったoverflow: scroll のスクロールバーのカスタマイズとほとんど同じデザインとなりました。

DEMO

どうしてもすべてのブラウザに対応する場合はこちらをご利用くださいませ。