CSSでスクロールバーをカスタマイズする方法

Webサイト制作でコンテンツが長くなるとスクロールをさせる必要が出て来ますが、スクロールバーの見た目が合わずにカスタマイズしたい、デザインを変えたいと感じることがあるのではないでしょうか？本記事では、CSSでスクロールバーをカスタマイズする方法をご紹介します。

 

「::-webkit-scrollbar」プロパティを使う

スクロールバーのカスタマイズには「::-webkit-scrollbar」擬似要素を使用します。

「::-webkit-scrollbar」擬似要素には以下のようなものがあります。

::-webkit-scrollbar

スクロールバー全体。縦スクロールの場合はwidthで、横スクロールの場合はheightでスクロールバーの幅を指定できます。

 

::-webkit-scrollbar-button

Windowsの時に表示されるスクロールバーの一番上下に表示されるスクロールボタン。（上向きと下向きの矢印）

 

::-webkit-scrollbar-thumb

ドラッグ可能なスクロールハンドル部分。

 

::-webkit-scrollbar-track

スクロールバーの背景部分。

 

::-webkit-scrollbar-track-piece

スクロールバーの背景部分で、スクロールハンドルの上下にあるエリアです。

 

::-webkit-scrollbar-corner

水平スクロールバーと垂直スクロールバーの両方が交わる隅の部分。両方のスクロールバーが表示されるか、サイズ変更ハンドルが表示されるときに使用します。

 

::-webkit-resizer

要素の隅に表示されるドラッグ可能なサイズ変更用のハンドル部分。

 

これらの中で最低限指定の必要な擬似要素は

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

この３つになります。

 

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

画像は-webkit-scrollbarでカスタマイズしたスクロールバーです。

 

HTML

<div class=”scrollarea”>

  <ul>

    <li>目次1</li>

    <li>目次2</li>

    <li>目次3</li>

    <li>目次4</li>

    <li>目次5</li>

    <li>目次6</li>

    :

    <li>目次12</li>

  </ul>

</div>

 

CSS

.scrollarea::-webkit-scrollbar {

  width: 7px;

}

.scrollarea::-webkit-scrollbar-thumb {

  background: linear-gradient(0deg,#43e2c6,#3183d0);

  border-radius: 3px;

}

.scrollarea::-webkit-scrollbar-track {

  background: rgba(100,100,100, .5);

}

 

-webkit-scrollbarでwidthをMacで見られるような狭い幅に設定し、-webkit-scrollbar-thumbでハンドル部分に丸みを持たせています。ハンドルと背景色はbackgroundで指定できるので、画像のようなグラデーションのスクロールバーを指定することもできます。

今回は.scrollareaに対してoverflow-y:scrollを指定し縦スクロールバーのみ表示させていますが横スクロールについても同様の指定で装飾が可能です。

-webkit-scrollbarプロパティの注意点

::-webkit-scrollbarプロパティはwebkit系のブラウザにしか対応していないため、Google ChromeやSafariといったブラウザでは表現できますが、IEやFirefoxでは表現することができません。

webkit系以外のブラウザでスクロールはさせたいが、スクロールバーを表示したくないといった場合はスクロールバー自体を隠すといった方法が考えられます。

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

画像はスクロールバーを非表示にした状態です。

HTMLは先ほどと同じになっています。

CSS

.scrollarea {

  width: 500px;

  height: 300px;

  overflow: hidden;

}

.scrollarea ul {

  width: calc(100% + 14px);

  height: 600px;

  overflow-y: scroll;

}

 

スクロールさせたい要素の幅を、親要素の幅+スクロールバーの幅に指定することでスクロールバーだけが隠れた状態にしています。

スクロールさせたい要素にどうしてもスクロールバーを表示させたくない場合や、webkit系のブラウザ以外で-webkit-scrollbarプロパティが使えないという場合には、こういった方法もあります。

 ブラウザによってプロパティを使い分けましょう

-webkit-scrollbarプロパティを使用すればwebkit系のブラウザに対して調整できるため、WindowsとMacでのOS間でのスクロールバーによる細かなズレに対応できるかと思います。webkit系のブラウザであるならモバイルと表示を分けても面白いかもしれません。