JavaScript + SimpleBar: スクロールバーのスタイルをカスタマイズする

SimpleBarはスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。

デザインはCSSで定める

SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるのです。

軽量なライブラリ

6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。

モダンブラウザをサポート

ChromeとFirefox、Safariなどのモダンブラウザに加え、Internet Explorer 11をサポートします。

ライブラリの概要はドキュメントとデモページでお確かめください。本稿でつくるのは、つぎのサンプルです。「JavaScript + CSS: ヘッダを上部に固定してカラムの中身はスクロールさせる」のコードにSimpleBarのスタイルを割り当てました。

See the Pen JavaScript + SimpleBar: Customizing scrollbar style by Fumio Nonaka (@FumioNonaka) on CodePen.

インストール

インストールには、npmやyarnが使えます。

npm install simplebar --save

yarn add simplebar

また、unpkgとjsDeliverからCDNで読み込むこともできます。JavaScriptとCSSのライブラリがそれぞれ必要です。

<link
  rel="stylesheet"
  href="https://unpkg.com/simplebar@latest/dist/simplebar.css"
/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
<!-- または -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"
/>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

バージョンを固定したいときは、@latestをバージョン番号に置き替えてください。たとえば、本稿執筆時の最新リリース版であれば、@5.2.1です。unpkgでバージョンのリストが確かめられます。

なお、Webpackなどのモジュールローダーを使う場合には、JavaScriptとCSSのライブラリをimportしてください。

import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.css';

data-*グローバル属性で設定する

SimpleBarのもっとも簡単な使い方は、スクロールバーを加えたい要素にdata-*グローバル属性としてdata-simplebarを与えることです。なお、スクロールさせる要素には、CSSでoverflow: autoを定めてください。

<div data-simplebar>
  <!-- コンテンツ -->
</div>

これだけで、要素にはSimpleBarのスタイルでスクロールバーが表示されます(図001)。デフォルトでは、要素にマウスポインタを重ねたときバーが表れる自動表示の設定です。

図001■設定されたスクロールバー

つねにスクロールバーを表示しておきたいとき、タグに加えるオプション属性はdata-simplebar-auto-hideです。JavaScriptコードの場合には、autoHideオプションを用います。

<div data-simplebar data-simplebar-auto-hide="false"></div>

JavaScriptコードでSimpleBarを要素に設定する

JavaScriptコードで要素にSimpleBarを設定する場合は、SimpleBar()コンストラクタに要素の参照を渡すだけです。

new SimpleBar(document.getElementById('myElement'));

オプションは、コンストラクタの第2引数のオブジェクトにプロパティとして渡します。たとえばつぎのコードはスクロールバーの自動表示(autoHide)をオフにする場合です(デフォルト値はtrue)。

new SimpleBar(document.getElementById('myElement'), { autoHide: false });

CSSでスクロールバーのスタイルを変える

SimpleBarのスクロールバーのスタイルは、CSSにより定められています。つまり、見栄えがCSSで変えられるということです。ここでは、スクロールさせるスライダのカラーをグラデーションにしてみましょう(図002)。こうしてでき上がったのが、冒頭のCodePenのサンプルです。

.simplebar-scrollbar::before {
	background: linear-gradient(darkblue, skyblue);
}

図002■スライダのカラーがグラデーションになった

SimpleBarのスクロールバーのCSSは、つぎの4つのクラスをもとに組み立てられています。具体的な定めについては、ソースコードsimplebar.cssをご参照ください。

• simplebar-content スクロールするコンテンツを包むラッパー
• simplebar-scroll-content スクロールする要素が収められたコンテナ
• simplebar-scrollbar ユーザーがコンテンツを操作するスクロールバーのスタイルの定め
• simplebar-track スクロールバーが置かれた領域のスタイル