JavaScript

jquery.jscrollpane.jsを使ってスクロールバーデザインをカスタムする方法

  /

jquery.jscrollpane.jsを使ってスクロールバーデザインをカスタムする方法をご紹介します。
スクロールバーをデフォルトデザインを使用せず、デザインされたスクロールバーを作る時に使ったjsプラグインjquery.jscrollpane.jsです。

Contents
  1. jquery.jscrollpane.jsを使ったJavaScriptの記述
  2. カスタムスクロールバーのCSS記述
  3. カスタムスクロールバーを表示するHTML記述
  4. スクロールバーをjsでカスタムしたデモページ
  5. ソース元：jScrollPane

jquery.jscrollpane.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」の色やサイズや背景に画像を使用したりすると、色々とスクロールバーをカスタムできます。

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

ソース元：jScrollPane

jScrollPane

スクロールバーがデフォルトではなくデザインされてると面倒だったりしますが、何だかんだ言いながらデザインにあわせてやってます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

スクロールバー カスタム
RELATED POST