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

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

サンプル紹介

美しいデザインのスクロールバーを作成

インラインフレームのような仕組みを利用することで、ページ中にスクロールバーを表示することは可能ですが、ブラウザによってデザインが異なりカスタマイズもできません。

しかしjQuery custom content scrollerを利用することで自由度の高いカスタムスクロールバーを簡単に設置できます。このプラグインは高機能なので、4ページにわたり説明していきます（左のサンプルは次回紹介するサンプルです）。

左の画像をクリックするとサンプルが開くので、スクロールバーを確認して下さい。スクロールバーをドラッグしたり上下に付いた矢印ボタンでスクロールさせることができます。

また前回紹介したjquery.mousewheelプラグインが組み込まれているので、マウスホイールでスクロールさせることもできます。

組み込み

jQuery custom content scroller ver2.7著作権：Creative Commons: ダウンロードサイト：jQuery custom content scroller
※リンク先に利用方法が記述されています。
※著作権のクリエイティブコモンズは「表示 3.0 非移植」です（詳細はこちら）。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。

<script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js">

前回紹介したマウスホイールのプラグイン「jquery.mousewheel.js」は「jQuery custom content scroller」で読み込んでいるためリンクの必要はありません。

本家のページではjavaScriptをページ内の最後に記載するように指示していますが、個人的にあまり好きな方法ではないのでheadタグ内に記載していきます。body内にjavaScriptを書くメリットとして、javaScriptの実行タイミングが早くなります。このためjavaScriptが実行される前の「正常にレイアウトされていない状態」が表示される危険性が少なくなります。

とはいえ、スクロールないで表示する内容量が少ない場合はheadタグないで問題ないと思います。内容量が多くページの読み込み時に一瞬「レイアウトされていない状態」が見えてしまう場合は本家サイトの方法で組み込んでみて下さい。

「jQuery custom content scroller」ではスクロールバーのデザインをcssで設定しているため、jsファイルの他に一緒にダウンロードされるcssファイルをリンクする必要があります。

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

構文

「jQuery custom content scroller」を組み込むと、以下のmCustomScrollbarメソッドが追加されます。

カスタムスクロールバーの設定返値：jQueryオブジェクト: jQo.mCustomScrollbar( オプション)
オプションはobjectオブジェクトで設定します。
どのようなプロパティが設定できるかは「解説」で説明していきます。

解説

html/cssの確認と最小限の設定

サンプル（scroll1/01.html）を開いて、body内にdiv要素があることを確認してください。このdiv要素にスクロールバーを設置するので非常に長い文章を入れています（jQuery custom content 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を設定しました。

var csObj = new Object();
csObj.horizontalScroll=true;
$("#content_1").mCustomScrollbar(csObj);

結果として、div要素下部にスクロールバーが表示され横にスクロールできるようになります。

テーマの指定

スクロールのデザイン変更はリンクしたjquery.mCustomScrollbar.cssを変更することで可能ですが、テーマを指定することで簡単にデザインを変更できます。サンプル（scroll1/03.html）を開いてbody内の構成に変更がないことを確認して下さい。jQueryは以下の様に変更されています。

var csObj = new Object();
csObj.theme="dark";
$("#content_1").mCustomScrollbar(csObj);

objectオブジェクトを作成するのはscroll1/02.htmlと同じですが、作成するプロパティが異なり「theme」となっています。この値として指定できるテーマは本家のサイトで紹介されているので確認して下さい。
気付きにくいのですがテーマに「dark」を設定するとスクロールバーの色が白から黒に変更されます。明るい背景色の時に利用するのでしょう。

紹介したサイトでは背景色が変更されていますが、これはテーマとは別です。テーマによって変更できるのは「スクロールバーが白か黒」「スクロールレールが白か黒」「スクロールバーの太さ」だけです。

しかし半透明の設定がされているので、若干背景色によって色が変わります。サンプル（scroll1/03b.html）では背景色を緑に変更しているため、スクロールバーが濃い緑、スクロールレールが少し濃い緑になっています。

もしテーマ以上にカスタマイスしたい場合は本家サイトの「Styling the scrollbars」の項目を確認して下さい。次回も引き続きカスタムスクロールバーについて説明します。

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