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">
<p>
~ココに長文のテキストを記述します~
</p>
</div>

 

5.補足

ヘッダーで指定した「jquery.jscrollpane.css」ファイル内の
「.~Bar」の色やサイズや背景に画像を使用したりすると、
色々とスクロールバーをカスタムできます。
 
スクロールバーをjsでカスタムしたデモ
 
ソース元:jScrollPane
 
ちょっとスクロールバーまでデザインされると面倒だったりしますが、
何だかんだ言いながらやってしまいます…