jQuery入門講座：カスタムスクロールバー(3)

カスタムスクロールバー（3）

概要と組み込み

前回に引き続きカスタムスクロールバーについて説明していきます。

解説

最後までスクロール

「jQuery custom content scroller」はmCustomScrollbarメソッドを利用することで、コンテンツを最後までスクロールさせることもできます。サンプル（scroll3/01.html）を開いてbody内の最後にbutton要素が追加されていることを確認して下さい。

<button>scroll to bottom.</button>

jQueryは以下の部分を確認して下さい。mCustomScrollbarメソッドを利用するのは前回と同じなのですが、引数にobjectオブジェクトを設定しないことに注意して下さい。以下の様に第1引数に「scrollTo」を指定してスクロールを指示し、第2引数に「buttom」とスクロール先を指定します。

$("button").click(function(){
	$("#content_1").mCustomScrollbar("scrollTo","bottom");
})

結果として、buttonをクリックすると最後までスクロールします。

指定したidへスクロール

前項で紹介したmCustomScrollbarメソッドの構文は以下の様になっており、移動先にはid名も利用できます。

スクロールの指示返値：jQueryオブジェクト: jQo.mCustomScrollbar( "scrollTo", 移動先 )
※引数のscrollToや移動先は文字列で指定するのでクォートを忘れないで下さい。
※移動先には以下の設定が可能です。
　・id名…指定したid属性の要素までスクロールします（単独であればclass名でも可能）。
　・top…「縦スクロール」の「最初」にスクロールします。
　・bottom…「縦スクロール」の「最後」にスクロールします。
　・left…「横スクロールの」の「最初」にスクロールします。
　・right…「横スクロールの」の「最後」にスクロールします。
　・first…スクロール内の最初の要素までスクロールします。
　・last…スクロール内の最後の要素までスクロールします。
　・ピクセル数…指定したピクセルまでスクロールします（クォートは必要ありません）。

サンプル（scroll3/01b.html）を開いてjQueryが以下の様に変更されていることを確認して下さい。結果としてbuttonをクリックすると一番最初にスクロールします。

$("button").click(function(){
	$("#content_1").mCustomScrollbar("scrollTo","top");
})

サンプル（scroll3/01c.html）を開いて、body内にid属性testを設定した要素があることを確認して下さい。

<p id="test">Etiam sed massa felis, aliquam pellentesque est.</p>

jQueryは以下の様に第2引数にid属性testが設定されています。

$("#content_1").mCustomScrollbar("scrollTo","#test");

結果としてbuttonをクリックするとid属性testの要素までスクロールします。id属性testの要素は赤くしてあるので、指定した場所までスクロールしたことが確認できると思います。

オプションの設定

第3引数にobjectオブジェクトを設定することで、スクロール速度などを変更することができます。
サンプル（scroll3/02.html）を開いてjQueryが以下の様に変更されていることを確認して下さい。

$("button").click(function(){
	$("#content_1").mCustomScrollbar("scrollTo","bottom",{scrollInertia:3000});
})

第3引数に設定するのはobjectオブジェクトなことに注意して下さい。scrollInertiaプロパティに値（ミリ秒）を設定することでスクロールに掛かる時間を設定することができます。サンプルでは3000を設定しているので、3秒かけてスクロールします。

スクロールの指示返値：jQueryオブジェクト: jQo.mCustomScrollbar( "scrollTo", 移動先, オプション )
※オプションはobjectオブジェクトで設定します。

他にもボタンをクリックした場合はコールバックを実行しない設定にすることができます。サンプル（scroll3/03.html）を開いてjQueryを確認して下さい。これは前回紹介したサンプル（scroll2/03.html）と同じ物で、最後までスクロールするとアラートが表示されます。実際に最後までスクロールしてアラートがでることを確認して下さい。

続いてサンプル（scroll3/03b.html）を開いて、body内の最後にbutton要素が追加されていることを確認して下さい。jQueryは以下の処理が追加されています。

$("button").click(function(){
	$("#content_1").mCustomScrollbar("scrollTo","bottom",{callbacks:false});
})

このようにオプションでcallbacksプロパティをfalseに設定すると、クリックなどで機械的にスクロールした場合はコールバックを実行しない設定にできます。結果としてbuttonをクリックして最後までスクロールしてもアラートは表示されません。

スクロール位置の取得

mCustomScrollbarメソッドを利用すると、自動的に「mcs」という名のobjectオブジェクトが作成されます。このオブジェクトを以下の様なプロパティを持っているので、これを利用することで現在のスクロール位置などを取得できます（%も取得できるので便利です）。

mscオブジェクトの持つプロパティ: mcs.top … 上からのコンテンツ位置（px）
mcs.left … 左からのコンテンツ位置（px）
mcs.topPct … 上からのコンテンツ位置（%）
mcs.leftPct … 左からのコンテンツ位置（%）
mcs.draggerTop … 上からのスクロールバー位置（px）
mcs.draggerLeft … 左からのスクロールバー位置（px）

サンプル（scroll3/04.html）を開いてjQueryを確認して下さい。以下の様にwatchFuncが追加されています。ここで着目するのは「mcs」です。ページ内を確認しても「mcs」を作成している部分はありません。これはmCustomScrollbarメソッドを利用すると自動的に作成されるオブジェクトなのです。

function watchFunc(){
	var ans = mcs.topPct;
	alert(ans);
}

このサンプルではmscのtopPctプロパティを利用しているので、watchFuncが実行されるとコンテンツ位置（%）をアラートで表示します。watchFuncは以下の様にbuttonをクリックすると実行されるので、コンテンツを最後までスクロールしてからbuttonをクリックして下さい。

$("button").click(watchFunc);

最後の位置は上から100パーセントなので、アラートで「100」と表示されます。

メモ

スナップスクロール

本家サイトに興味深いサンプルがあったので、シンプルに改造して紹介します。サンプル（scroll3/test01.html）を開いてスクロールボタンの仕様を確認して下さい。前回紹介した「クリック毎に移動」にしています。

移動量をちょうど1つのコンテンツ分にしているので、クリックする毎にちょうど良く移動します。しかしスクロールバーでは移動量を設定できないため、スクロールバーを操作すると中途半端な位置になってしまいます。そのため本家のサンプルではスクロールが完了した時に、ちょうど良い場所にスナップするようにしてありました。これはプラグインの機能ではなく、独自のfunctionを作成して実現されています。

本家のサンプルは少々複雑だったので、少しシンプルにしたサンプルを用意しました。
サンプル（scroll3/test02.html）を開いて、スクロールバーを操作して下さい。スクロールが停止するとちょうど良い場所に移動します。

シンプルにはしてありますが、少々難しいので解説は省きます。しかしソースにコメントを書いておいたので興味のある方は確認して下さい。次回はjQueryではなくcssを変更してデザインを偏向することに挑戦します。

次のページ：カスタムスクロールバー(おまけ)