scroller」は色々なオプションを選択することができます。ここでは前回に引き続きカスタムスクロールバーについて説明していきます。解説スクロールボタンの設置スクロールボタンを設置するためにはダウンロードしたフォルダ内にある「mCSB_buttons.png」を「jquery.mCustomScrollbar.concat.min.js」と同じ階層に入れて下さい。サンプル(scroll2/01.html)を開いてbody内の構成が前回のサンプル(scroll1/02.html)から変更がないことを確認して下さい。jQueryの変更だけでスクロールボタンを設置できます。{enable:true};$("#content_1").mCustomScrollbar(csObj);objectオブジェクトで設定するのは前回と同じなのですが、今回作成する「scrollButtons」プロパティは他にもたくさんの設定ができるため、値としてobjectオブジェクトを設定します(objectオブジェクトの数が増えると混乱すると思うので、直接作成して代入しています)。今回設定したプロパティは「enable」で、これをtrueにすることでスクロールバーが表示されます。横スクロールの場合でも設置することができます。{enable:true};$("#content_1").mCustomScrollbar(csObj);クリック毎に移動スクロールボタンは押しっぱなしでスクロールする仕様になっていますが、これをクリック毎に移動する仕様に変更できます。サンプル(scroll2/02.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。前回追加したscrollButtonsプロパティに2つのプロパティ「scrollType」と「scrollAmount」を設定しています。scrollTypeをpixcelにすることで、クリック毎に指定したピクセル移動するようになります。移動量はscrollAmountで設定します。{enable:true,scrollType:"pixels",scrollAmount:300};$("#content_1").mCustomScrollbar(csObj);結果としてスクロールボタンを押しっぱなしにしてもスクロールしなくなり、クリック毎に300px移動するようになります。コールバックの設定このプラグインはスクロールに関するコールバックを5種類設定することができます。本家サイトのデモが分かりやすいです。最初に戻ってきた時ここでは最後までスクロールした時(onTotalScroll)のサンプルを紹介します。サンプル(scroll2/03.html)を開いてjQueryを確認して下さい。以下の様に最後までスクロールした時に実行したいfunctionを設定します(今回はfinsihFuncと名付け、アラートを表示するようにしました)。finishFunc(){alert("最後までスクロールしました");}続いてobjectオブジェクトの部分を確認して下さい。以下の様にcallbacksプロパティにスクロールボタンと同じようにobjectオブジェクトを設定します。ここではonTotalScrollプロパティを設定して、最後までスクロールしたらfinishFuncを実行するようにしました。{onTotalScroll:finishFunc};結果として最後までスクロールすると、アラートで「最後までスクロールしました」と表示されます。カスタムスクロールバーではイージングの設定がしてあり、スクロールバーに少し遅れてコンテンツがスクロールします。コールバックが反応するのはスクロールバーではなくコンテンツなので、コンテンツが最後まで移動したらアラートが表示されることに注意して下さい。イージングの設定をOFFにするとコンテンツが最後まで移動する少し前にアラートが表示されてしまいますが、これはバグではありません。画面の描画よりも先にfinishFuncが実行されるだけで、内部的には正しい動作です。実際にアラートを閉じると画面が描画されコンテンツが最後まで移動していることが確認できます。→サンプル(scroll2/03b.html)イージングの設定をOFFにするにはscrollInertiaプロパティの値を0にします。{onTotalScroll:finishFunc};$("#content_1").mCustomScrollbar(csObj);次回は指定した場所までスクロールするようなメソッドなどを紹介していきます。