Webデザインでスクロールバーがデフォルトのものでは無く、デザインされたデータを貰った時に使っ他jsプラグインjquery.jscrollpane.min.jsです。
Contents
jquery.jscrollpane.min.jsを使ったJavaScriptの記述
※jquery.jscrollpane.min.jsを読み込み、カスタムスクロールバーを表示するタグ.scroll-paneを指定します。
<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">
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane(); //class名を指定
});
</script>
カスタムスクロールバーの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;
}
カスタムスクロールバーを表示するHTML記述
<div class="scroll-pane"> ～ココに長文のテキストを記述します～ </div>
スクロールバーをjsでカスタムしたデモページ
ヘッダーで指定した「jquery.jscrollpane.css」ファイル内の「.～Bar」の色やサイズや背景に画像を使用したりすると、色々とスクロールバーをカスタムできます。
jScrollPaneソース元
ソース元：jScrollPane
スクロールバーがデフォルトではなくデザインされてると面倒だったりしますが、何だかんだ言いながらデザインにあわせてやってます。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
