jquery.jscrollpane.min.js：スクロールバーをカスタムするjs

デザイナーさんからスクロールバーをデフォルトのものでは無く、ちょっとデザインされたモノがあがってきた時に使用しました。

1．ヘッダーの記述

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
 	 	<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all">

2．JavaScriptの記述

<script type="text/javascript">
$(function(){
	$('.scroll-pane').jScrollPane();	//class名を指定
});
</script>

3．css記述

（以下のcssは調整してみて下さい）

#idContents01{
width:500px;
height:400px;
margin:0 auto;
padding-top:15px;
}
#idContents01 .clTxt01{
padding:20px;
font-size:12px;
line-height:1.2em;
}
.scroll-pane{
width: 100%;
height: 400px;
overflow: auto;
font-size:12px;
}

4．HTMLの記述

<div class="scroll-pane">

～ココに長文のテキストを記述します～

</div>

5．補足

ヘッダーで指定した「jquery.jscrollpane.css」ファイル内の「.～Bar」の色やサイズや背景に画像を使用したりすると、色々とスクロールバーをカスタムできます。

スクロールバーをjsでカスタムしたデモ

ソース元：jScrollPane

ちょっとスクロールバーまでデザインされると面倒だったりしますが、何だかんだ言いながらやってしまいます…