カルーセルとnivo(4)カスタムスクロールバー(3)概要と組み込み前回に引き続きカスタムスクロールバーについて説明していきます。scroller」はmCustomScrollbarメソッドを利用することで、コンテンツを最後までスクロールさせることもできます。サンプル(scroll3/01.html)を開いてbody内の最後にbutton要素が追加されていることを確認して下さい。bottom.</button>jQueryは以下の部分を確認して下さい。mCustomScrollbarメソッドを利用するのは前回と同じなのですが、引数にobjectオブジェクトを設定しないことに注意して下さい。以下の様に第1引数に「scrollTo」を指定してスクロールを指示し、第2引数に「buttom」とスクロール先を指定します。$("button").click(function(){$("#content_1").mCustomScrollbar("scrollTo","bottom");})結果として、buttonをクリックすると最後までスクロールします。指定したidへスクロール前項で紹介したmCustomScrollbarメソッドの構文は以下の様になっており、移動先にはid名も利用できます。)※引数の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を設定した要素があることを確認して下さい。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秒かけてスクロールします。)※オプションは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オブジェクトが作成されます。このオブジェクトを以下の様なプロパティを持っているので、これを利用することで現在のスクロール位置などを取得できます(%も取得できるので便利です)。左からのスクロールバー位置(px)サンプル(scroll3/04.html)を開いてjQueryを確認して下さい。以下の様にwatchFuncが追加されています。ここで着目するのは「mcs」です。ページ内を確認しても「mcs」を作成している部分はありません。これはmCustomScrollbarメソッドを利用すると自動的に作成されるオブジェクトなのです。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を変更してデザインを偏向することに挑戦します。