スクロールバーカスタマイズ（jScrollPane）

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー jQuery

案件でオリジナルなスクロールバーを設置する必要があり、色々と調べてみるとjScrollPaneが便利そうです。実装のやり方をググってみたところ、サンプルはあるもののなかなか設置の仕方まで解説しているところはありませんでした。しょうがないので自分でまとめてみることにしました。パンが無いならケーキを食べればいいじゃない的なノリで。違うか。

以下が公式サイトです。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

最低限+一般的に必要なファイルは以下の通りです。

* jQuery
* the mouse wheel plugin
* the jQEm plugin
* jScrollPane.js
* jScrollPane.css

これらをダウンロードし、任意のフォルダに配置します。
※jqueryについては、リンク切れしてるようですので、
どこかから持ってくる必要があります。（http://jquery.com/）
現バージョンの1.4.2でも問題なく動くようです。

僕は以下のような構成にしました。

htmlフォルダ
├jsフォルダ
├cssフォルダ
├imagesフォルダ
└sample.html

以降、この構成に準じて記述します。実際に設置する構成にあわせ適宜読み替えてください。

サンプル

サンプルコード

直接関係無い箇所は割愛しています。

<head>


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.em.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<link href="css/jScrollPane.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
$(function(){
$('#pane1').jScrollPane();
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
});</script>


<style type="text/css">
<!--
.osX .jScrollPaneTrack {
background: url(images/osx_track.gif) repeat-y;
}
.osX .jScrollPaneDrag {
background: url(images/osx_drag_middle.gif) repeat-y;
}
.osX .jScrollPaneDragTop {
background: url(images/osx_drag_top.gif) no-repeat;
height: 6px;
}
.osX .jScrollPaneDragBottom {
background: url(images/osx_drag_bottom.gif) no-repeat;
height: 7px;
}
.osX a.jScrollArrowUp {
height: 24px;
background: url(images/osx_arrow_up.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowUp:hover {
background-position: 0 0;
}
.osX a.jScrollArrowDown {
height: 24px;
background: url(images/osx_arrow_down.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowDown:hover {
background-position: 0 0;
}
-->

</style>
</head>
<body>


<div id="pane1" class="scroll-pane" style="width:200px;height:200px;background-color:#EEEEEE;">
中身1行目<br />
中身2行目<br />
中身3行目<br />
中身4行目<br />
中身5行目<br />
中身6行目<br />
中身7行目<br />
中身8行目<br />
中身9行目<br />
中身10行目<br />
中身11行目<br />
中身12行目<br />
中身13行目<br />
中身14行目<br />
中身15行目<br />

</div>



<div class="osX">
<div id="pane2" class="scroll-pane" style="width:200px;height:200px;background-color:#EEEEEE;">
中身1行目<br />
中身2行目<br />
中身3行目<br />
中身4行目<br />
中身5行目<br />
中身6行目<br />
中身7行目<br />
中身8行目<br />
中身9行目<br />
中身10行目<br />
中身11行目<br />
中身12行目<br />
中身13行目<br />
中身14行目<br />
中身15行目<br />

</div>
</div>
</body>

以下、ソースに示した番号順に解説します。

(1)必要ファイルの読み込み

jquery-1.4.2.min.js　*
jquery.mousewheel.js
jquery.em.js
jScrollPane.js　*
jScrollPane.css　*

*がついたファイルが必須です。最低限それがあれば動作するようです。
jquery.mousewheel.jsは、マウスのホイールでスクロールさせるためのライブラリです。事実上必須ですね。
jquery.em.jsは、ユーザーがブラウザ側で文字サイズを変えた場合に、自動的にスクロールボックスの大きさを調整してくれるライブラリです。
無くても困りませんが、これがないと、文字サイズを変えられた場合に見た目が崩れる可能性が高いです。

(2)プログラムの開始処理

基本的な構文は以下の通りです。
$(function()
{
$(‘#XXXX’).jScrollPane();
});
#XXXXの部分に、スクロールさせたいボックスのidを入れます。
.jScrollPane()の()にパラメータを設定することである程度見た目をコントロールできます。何も入れないとデフォルト表示されます。
具体的なパラメータについては公式を参照ください。

(3)カスタマイズする場合のCSS記述

.jScrollPaneTrackなどにそれぞれ背景画像を指定することで、
スクロールバー部分をカスタマイズできます。
今回は、公式サイトから拝借して、osXを模したものをサンプルとして載せてます。
クラスとの対応はそれぞれ以下の通り。計6枚用意すればよさそうです。

.jScrollPaneTrack　スクロールバーの背景
.jScrollPaneDrag　ドラッグするつまいの胴体（伸縮する部分）
.jScrollPaneDragTop　ドラッグするつまみの上部分（今回は半円）
.jScrollPaneDragBottom　ドラッグするつまみの下部分（今回は半円）
.jScrollArrowUp　上スクロールボタン
.jScrollArrowDown　下スクロールボタン

(4)スクロールボックスデフォルト

divでボックスを作成し、それに対して幅、高さを指定し、idを与えます。
そのidをheadでの指定と対応させればOKです。

特に何も指定していなければ、左のように表示されます。

(5)スクロールボックスカスタマイズ

基本的には(4)と同様ですが、CSSセレクタの記述が容易になるよう、
外枠としてもう一つボックスで囲み、そちらにクラスを割り当てました。
このあたりはコーディングの都合が許す限り自由に書いて構わないと思います。

以上で動くはずです。

関数呼び出しの際のパラメータ調整と、用意するスクロールバーの画像次第で、いくらでもカスタマイズできそうですね。

いい世の中になりました。なーんて思っていたら、今回の案件のクライアントさんから
「ボックスのスクロールはiframeを想定しています」との連絡がありました。

・・・そうでしたか・・・・

おあとがよろしいようで。

jQuery