初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

このエントリーをはてなブックマークに追加
索引
1章:小ネタ系
2章:ショーケース系
3章:カルーセル系

カスタムスクロールバー(2)

概要と組み込み

「jQuery custom content scroller」は色々なオプションを選択することができます。ここでは前回に引き続きカスタムスクロールバーについて説明していきます。

解説

スクロールボタンの設置

スクロールボタンを設置するためにはダウンロードしたフォルダ内にある「mCSB_buttons.png」を「jquery.mCustomScrollbar.concat.min.js」と同じ階層に入れて下さい

サンプル(scroll2/01.html)を開いてbody内の構成が前回のサンプル(scroll1/02.html)から変更がないことを確認して下さい。jQueryの変更だけでスクロールボタンを設置できます。

var csObj = new Object();
csObj.scrollButtons = {enable:true};
$("#content_1").mCustomScrollbar(csObj);

objectオブジェクトで設定するのは前回と同じなのですが、今回作成する「scrollButtons」プロパティは他にもたくさんの設定ができるため、値としてobjectオブジェクトを設定します(objectオブジェクトの数が増えると混乱すると思うので、直接作成して代入しています)。

今回設定したプロパティは「enable」で、これをtrueにすることでスクロールバーが表示されます。横スクロールの場合でも設置することができます。→サンプル(scroll2/01b.html

ar csObj = new Object();
csObj.horizontalScroll=true;
csObj.scrollButtons = {enable:true};
$("#content_1").mCustomScrollbar(csObj);

クリック毎に移動

スクロールボタンは押しっぱなしでスクロールする仕様になっていますが、これをクリック毎に移動する仕様に変更できます。サンプル(scroll2/02.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。

前回追加したscrollButtonsプロパティに2つのプロパティ「scrollType」と「scrollAmount」を設定しています。scrollTypeをpixcelにすることで、クリック毎に指定したピクセル移動するようになります。移動量はscrollAmountで設定します。

var csObj = new Object();
csObj.scrollButtons = {
	enable:true,
	scrollType:"pixels",
	scrollAmount:300
};
$("#content_1").mCustomScrollbar(csObj);

結果としてスクロールボタンを押しっぱなしにしてもスクロールしなくなり、クリック毎に300px移動するようになります。

コールバックの設定

このプラグインはスクロールに関するコールバックを5種類設定することができます。本家サイトのデモが分かりやすいです。

スクロールに関する5つのコールバック
onScrollStart … スクロールを開始した時
whileScrolling … スクロール中
onScroll … スクロールが停止した時
onTotalScroll … 最後までスクロールした時
onTotalScrollBack … 最初に戻ってきた時

ここでは最後までスクロールした時(onTotalScroll)のサンプルを紹介します。サンプル(scroll2/03.html)を開いてjQueryを確認して下さい。まずは以下の様に最後までスクロールした時に実行したいfunctionを設定します(今回はfinsihFuncと名付け、アラートを表示するようにしました)。

function finishFunc(){
	alert("最後までスクロールしました");
}

続いてobjectオブジェクトの部分を確認して下さい。以下の様にcallbacksプロパティにスクロールボタンと同じようにobjectオブジェクトを設定します。ここではonTotalScrollプロパティを設定して、最後までスクロールしたらfinishFuncを実行するようにしました。

var csObj = new Object();
csObj.callbacks = {onTotalScroll:finishFunc};

結果として最後までスクロールすると、アラートで「最後までスクロールしました」と表示されます。カスタムスクロールバーではイージングの設定がしてあり、スクロールバーに少し遅れてコンテンツがスクロールします。コールバックが反応するのはスクロールバーではなくコンテンツなので、コンテンツが最後まで移動したらアラートが表示されることに注意して下さい

イージングの設定をOFFにするとコンテンツが最後まで移動する少し前にアラートが表示されてしまいますが、これはバグではありません。画面の描画よりも先にfinishFuncが実行されるだけで、内部的には正しい動作です。実際にアラートを閉じると画面が描画されコンテンツが最後まで移動していることが確認できます。
→サンプル(scroll2/03b.html
イージングの設定をOFFにするにはscrollInertiaプロパティの値を0にします。

var csObj = new Object();
csObj.scrollInertia = 0;
csObj.callbacks = {onTotalScroll:finishFunc};
$("#content_1").mCustomScrollbar(csObj);

次回は指定した場所までスクロールするようなメソッドなどを紹介していきます。