美しいデザインのスクロールバーを作成インラインフレームのような仕組みを利用することで、ページ中にスクロールバーを表示することは可能ですが、ブラウザによってデザインが異なりカスタマイズもできません。scrollerを利用することで自由度の高いカスタムスクロールバーを簡単に設置できます。このプラグインは高機能なので、4ページにわたり説明していきます(左のサンプルは次回紹介するサンプルです)。左の画像をクリックするとサンプルが開くので、スクロールバーを確認して下さい。スクロールバーをドラッグしたり上下に付いた矢印ボタンでスクロールさせることができます。前回紹介したjquery.mousewheelプラグインが組み込まれているので、マウスホイールでスクロールさせることもできます。scroller※リンク先に利用方法が記述されています。非移植」です(詳細はこちら)。htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。scroller」で読み込んでいるためリンクの必要はありません。本家のページではjavaScriptをページ内の最後に記載するように指示していますが、個人的にあまり好きな方法ではないのでheadタグ内に記載していきます。body内にjavaScriptを書くメリットとして、javaScriptの実行タイミングが早くなります。このためjavaScriptが実行される前の「正常にレイアウトされていない状態」が表示される危険性が少なくなります。いえ、スクロールないで表示する内容量が少ない場合はheadタグないで問題ないと思います。内容量が多くページの読み込み時に一瞬「レイアウトされていない状態」が見えてしまう場合は本家サイトの方法で組み込んでみて下さい。scroller」ではスクロールバーのデザインをcssで設定しているため、jsファイルの他に一緒にダウンロードされるcssファイルをリンクする必要があります。scroller」を組み込むと、以下のmCustomScrollbarメソッドが追加されます。オプション)オプションはobjectオブジェクトで設定します。どのようなプロパティが設定できるかは「解説」で説明していきます。解説html/cssの確認と最小限の設定サンプル(scroll1/01.html)を開いて、body内にdiv要素があることを確認してください。scrollerのサイトにあったサンプルの文章を使いました)。cssの設定は以下の様になっておりheight(もしくはmax-height)を設定しなければなりません。display属性がblockの要素である必要があり、overflow属性がautomかhiddenである必要があります。.content{width:260px;height:500px;overflow:hidden;padding:20px;background:#333;color:#eee;}ではjQueryを確認して下さい。以下の様にスクロールバーを設置したい要素をセレクタに指定し、それに対してmCustomScrollbarメソッドを利用するだけです。$(function(){$("#content_1").mCustomScrollbar();});このように簡単にスクロールバーを設置できます。マウスホイールにも対応しています。前回紹介した「jquery.mousewheel」を利用しているので、コンテンツ上でホイールを操作した時だけスクロールします。あとセレクタにはid名を利用するようにしましょう。当サイトのサンプルはコードをシンプルにするためidを設定しないことが多いのですが、それだと機能しません。サンプル(scroll1/01b.html)を開いて、body内のdiv要素にid属性が無いことを確認して下さい。jQueryでは以下の様にセレクタにdivを指定しました。$(function(){$("div").mCustomScrollbar();});結果として、スクロールバーが設置されません。id名を利用して指定するようにしましょう。横スクロールにも対応していますこのプラグインは横スクロールにも対応しています。サンプル(scroll1/02.html)を開いてbody内の構成に変更がないことを確認して下さい。jQueryは以下の様に変更されています。mCustomScrollbarメソッドは引数にobjectオブジェクトを設定することで仕様を変更することができます。1行目でobjectオブジェクト「csObj」を作成し、2行目でcsObjに「horizontalScroll」プロパティを作成し、値として「true」を設定しています。3行目でmCustomScrollbarの引数にcsObjを設定しました。Object();csObj.horizontalScroll=true;$("#content_1").mCustomScrollbar(csObj);結果として、div要素下部にスクロールバーが表示され横にスクロールできるようになります。テーマの指定スクロールのデザイン変更はリンクしたjquery.mCustomScrollbar.cssを変更することで可能ですが、テーマを指定することで簡単にデザインを変更できます。サンプル(scroll1/03.html)を開いてbody内の構成に変更がないことを確認して下さい。jQueryは以下の様に変更されています。Object();csObj.theme="dark";$("#content_1").mCustomScrollbar(csObj);objectオブジェクトを作成するのはscroll1/02.htmlと同じですが、作成するプロパティが異なり「theme」となっています。この値として指定できるテーマは本家のサイトで紹介されているので確認して下さい。気付きにくいのですがテーマに「dark」を設定するとスクロールバーの色が白から黒に変更されます。明るい背景色の時に利用するのでしょう。紹介したサイトでは背景色が変更されていますが、これはテーマとは別です。テーマによって変更できるのは「スクロールバーが白か黒」「スクロールレールが白か黒」「スクロールバーの太さ」だけです。半透明の設定がされているので、若干背景色によって色が変わります。サンプル(scroll1/03b.html)では背景色を緑に変更しているため、スクロールバーが濃い緑、スクロールレールが少し濃い緑になっています。scrollbars」の項目を確認して下さい。次回も引き続きカスタムスクロールバーについて説明します。