jQuery要らずでスクロールバーをカスタマイズするJavaScriptライブラリ・"perfect-scrollbar"。

「スクロールバーをカスタマイズしたい」という需要は結構多い筈なのだけれど、お手軽にちょいちょいとする方法はなかなか無い。そろそろスタイルシートでガシガシできるような仕様にならないのかなぁ…と思いつつ、現状では JavaScript で半ば無理矢理カスタマイズするのがベターな方法のようです。

Blink / Webkit エンジンを使用しているブラウザ（Chrome や Safari や Vivaldi などなど）ならば、擬似要素 ::-webkit-scrollbar なるものを使って外観のカスタマイズが可能です。

まぁ「特定のブラウザ限定」の技はひとまず横に置いておいて、と。

で、

jQueryに依存しない。
設定がシンプル。

…という2点を条件に探してみたところ、perfect-scrollbar がヒット。以前はjQueryプラグインとして開発されていたのですが、いつの間にか単体で動作もするように改良されていたのです。

GitHub - utatti/perfect-scrollbar: Minimalistic but perfect custom scrollbar plugin

ダウンロード

手動でダウンロードする場合は GitHubのこちらのページから最新版を入手。

ダウンロードしたアーカイブを展開すると、dist ディレクトリ内に perfect-scrollbar(.min).js が、css ディレクトリ内に perfect-scrollbar.css が見つかります。使用するのはこのふたつのファイル。

基本的な利用方法

perfect-scrollbar を使いたいページで、上記ふたつのファイルを読み込む。
スクロールバーを表示させたい要素に、スタイル position を指定する。（ position: relative; とか）
perfect-scrollbar をイニシャライズ。
以上。

・公式ページのドキュメントを参照。要は、例えば以下のような感じ。

カスタマイズ

スタイルシート（perfect-scrollbar.css）を弄ることで外観のカスタマイズが容易です。

初期状態では、コンテナ（スクロールバーを表示させたい要素）がオンマウスのときだけ、バーが visible になります。常にスクロールバーを表示させておきたいならば…

.ps > .ps__rail-x,
.ps > .ps__rail-y {
opacity: 0.6;
}

…というスタイル設定をすればOK。perfect-scrollbar.css を直接書き換えるか、perfect-scrollbar.css を読み込んだ後で上記を記述します。

また初期状態では、スクロールバーがオンマウスになると、バーの外観があまりお洒落じゃないものに変化してしまいます。外観の変化を抑止するには…

.ps__rail-x {
    height: 10px;
}

.ps__rail-y {
    width: 10px;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 6px;
}

…と、こんな感じでどうか。

バーの振る舞いのカスタマイズは、ドキュメントの "Options" の項を参照。

というわけで、実際にこちらのページ - プロ野球順位変動グラフで使ってみました。ご参考に。

freefielder.jp