「スクロールバーをカスタマイズしたい」という需要は結構多い筈なのだけれど、お手軽にちょいちょいとする方法はなかなか無い。そろそろスタイルシートでガシガシできるような仕様にならないのかなぁ…と思いつつ、現状では JavaScript で半ば無理矢理カスタマイズするのがベターな方法のようです。
で、
- jQueryに依存しない。
- 設定がシンプル。
…という2点を条件に探してみたところ、perfect-scrollbar がヒット。以前はjQueryプラグインとして開発されていたのですが、いつの間にか単体で動作もするように改良されていたのです。
ダウンロード
手動でダウンロードする場合は GitHubのこちらのページ から最新版を入手。
ダウンロードしたアーカイブを展開すると、dist ディレクトリ内に perfect-scrollbar(.min).js が、css ディレクトリ内に perfect-scrollbar.css が見つかります。使用するのはこのふたつのファイル。
基本的な利用方法
- perfect-scrollbar を使いたいページで、上記ふたつのファイルを読み込む。
- スクロールバーを表示させたい要素に、スタイル position を指定する。（ position: relative; とか）
- perfect-scrollbar をイニシャライズ。
- 以上。
・公式ページのドキュメントを参照。要は、例えば以下のような感じ。
#container { /* バーを表示する要素 */
position: relative;
width: 600px;
height: 480px;
overflow: hidden; /* 念の為 (参照) */
}
</style>
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<script src="dist/perfect-scrollbar.js"></script>
<!-- で、初期化 -->
<script>
var ps = new PerfectScrollbar('#container');
</script>
カスタマイズ
スタイルシート（perfect-scrollbar.css）を弄ることで外観のカスタマイズが容易です。
初期状態では、コンテナ（スクロールバーを表示させたい要素）がオンマウスのときだけ、バーが visible になります。常にスクロールバーを表示させておきたいならば…
.ps > .ps__rail-y {
opacity: 0.6;
}
…というスタイル設定をすればOK。perfect-scrollbar.css を直接書き換えるか、perfect-scrollbar.css を読み込んだ後で上記を記述します。
また初期状態では、スクロールバーがオンマウスになると、バーの外観があまりお洒落じゃないものに変化してしまいます。外観の変化を抑止するには…
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" の項 を参照。
というわけで、実際に こちらのページ - プロ野球 順位変動グラフ で使ってみました。ご参考に。
コメント