JavaScriptのプラグイン「perfect-scrollbar.js」を使ってみる

スクロールバーをカスタマイズできるプラグイン「perfect-scrollbar.js」を使ってみます。
※今回はバージョン1.2.0を使っていますが、バージョン1.0未満は使い方が違うようです。
詳しくは公式のドキュメントでご確認ください。

使い方

GitHubからダウンロードします。

ダウンロード後、必要なファイルを読み込みます。
cssはcssフォルダ、jsはdistフォルダに格納されているので、それぞれコピーして使ってください。

<link rel="stylesheet" href="perfect-scrollbar.css" />
<script src="perfect-scrollbar.js"></script>

#sampleのスクロールバーを変更するようにしてみます。

HTML

<div id="sample">
	<p>君も事実いったいこの前後っ放しというのの ...
	～略～
	... 聞えるましだでなくも用いなた。</p>
</div>

プラグインを設定する要素に、以下のプロパティを設定します。

CSS

#sample {
	position: relative;
	width: 400px;
	height: 400px;
}

プラグインの設定を行います。

JavaScript

var ps = new PerfectScrollbar('#sample');

スクロールバーを独自のものに変更できました。
プラグイン設定のデモページ

もしくは、以下のような指定方法でも設定できます。

JavaScript

var container = document.querySelector('#sample');
var ps = new PerfectScrollbar(container);

プラグイン設定のデモページ2

スクロール位置を変更したい場合、scrollTopを変更します。

JavaScript

var container = document.querySelector('#sample');
var ps = new PerfectScrollbar(container);
container.scrollTop = 50;

指定位置にスクロールするデモページ

スクロールバーはデフォルトでは非表示で、要素にオンマウスすると表示されるようになっています。
スクロールバーを常に表示するようにしたい場合、CSSの上書きで対応できます。

CSS

.ps__rail-x, .ps__rail-y {
	opacity: 0.6!important;
}

スクロールバーを常に表示するデモページ
　

オプション

オプションについて詳しくは、公式のドキュメントをご確認ください。

Options

Events

Eventsのデモページ

Methods

【参考サイト】

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