デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:小ネタ系
2章:ショーケース系
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を変更してデザインを偏向することに挑戦します。