サイト制作に関するメモ書き

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

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

handlers スクロールさせるハンドラを指定。
初期値は[‘click-rail’, ‘drag-thumb’, ‘keyboard’, ‘wheel’, ‘touch’]。
handlersのデモページ
wheelSpeed マウスホイールでのスクロール速度。
初期値は1。
wheelSpeedのデモページ
wheelPropagation スクロールの端でそれ以上スクロールできない時に、マウスイベントを親に伝番するかどうか。
初期値はfalse。
wheelPropagationのデモページ
swipePropagation スクロールの端でそれ以上スワイプできない時に、タッチイベントを親に伝番するかどうか。
初期値はtrue。
swipePropagationのデモページ
swipeEasing スワイプでのスクロールにイージングを設定するかどうか。
初期値はtrue。
swipeEasingのデモページ
minScrollbarLength スクロールバーの最小値を指定。
初期値はnull。
minScrollbarLengthのデモページ
maxScrollbarLength スクロールバーの最大値を指定。
初期値はnull。
maxScrollbarLengthのデモページ
scrollingThreshold スクロール要素からマウスアウトした時に、スクロールバーが非表示になるまでの時間をミリ秒で指定。
スクロールしないでマウスアウトした場合はすぐに非表示になる。
初期値は1000。
scrollingThresholdのデモページ
useBothWheelAxes X方向またはY方向どちらかのスクロールバーのみ表示されている場合に、X方向のスクロールとY方向のスクロールの両方がスクロールに影響するようにするかどうか。
例えばtrueに設定してX方向のスクロールバーのみを表示させている場合、Y方向のスクロールでもX方向にスクロールするようになる。
初期値はfalse。
useBothWheelAxesのデモページ
suppressScrollX X方向のスクロールバーを使用できなくするかどうか。
初期値はfalse。
suppressScrollXのデモページ
suppressScrollY Y方向のスクロールバーを使用できなくするかどうか。
初期値はfalse。
suppressScrollYのデモページ
scrollXMarginOffset スクロール要素の中身の幅が、X方向のスクロールバーを有効にしないでスクロール要素の幅を超えることができる範囲を指定。
初期値は0。
scrollXMarginOffsetのデモページ
scrollYMarginOffset スクロール要素の中身の高さが、Y方向のスクロールバーを有効にしないでスクロール要素の高さを超えることができる範囲を指定。
初期値は0。
scrollYMarginOffsetのデモページ

Events

Eventsのデモページ

ps-scroll-y Y方向にスクロールされた時に発火。
ps-scroll-x X方向にスクロールされた時に発火。
ps-scroll-up 上方向にスクロールされた時に発火。
ps-scroll-down 下方向にスクロールされた時に発火。
ps-scroll-left 左方向にスクロールされた時に発火。
ps-scroll-right 右方向にスクロールされた時に発火。
ps-y-reach-start スクロールしてY方向の開始位置に達した時に発火。
ps-y-reach-end スクロールしてY方向の終了位置に達した時に発火。
ps-x-reach-start スクロールしてX方向の開始位置に達した時に発火。
ps-x-reach-end スクロールしてX方向の終了位置に達した時に発火。

Methods

ps.update() スクロールバーの更新。
スクロール要素やスクロール要素の中身のサイズが変更された時に使用する。
update()のデモページ
ps.destroy() スクロールバーの破棄。
destroy()のデモページ

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP