2017年以前の旧ブログ

どんなサイトを制作してもどうしてもイメージに合わないスクロールバーをデザインしたい時、jQuery ラグインを使って、CSSでスクロールバーをカスタマイズします。

スクロールバーカスタマイズ用に色々プラグインでてますが、今回はjscrollpaneというjQueryプラグインを使用しました。

必要なファイルは、
・jquery.jsrollpane.min.js
・jquery.jscrollpane.css
後はJquery本体と一緒にhead内に読み込ませます。

HTMLソース

サンプルで動かすためのHTMLを記載します。

<div id="scrollbox">
	<img src="sample.jpg" alt="スクロールサンプル">
</div>

スクロールバーをカスタマイズしたい箇所を指定してJQueryを実行しますので、head内への書き込みは

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script  src="jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="jquery.jscrollpane.css" >
<script >
$(function(){
	$('#scrollbox').jScrollPane();
});
</script>

となります。

CSSカスタマイズ

jscrollpane.cssを編集してスクロールバーの幅、高さ、色を変更する事ができます。
主な変更箇所を以下に記載します。

/*縦スクロールバーの幅指定*/
.jspVerticalBar {width: 10px;}
/*横スクロールバーの高さ指定*/
.jspHorizontalBar {height: 10px;}
/*スクロールバーの背景色指定*/
.jspTrack {background: #eeeeee;}
/*スクロールバーの色指定*/
.jspDrag {background: #315fa8;}
/*スクロールバー縦・横の交点色指定*/
.jspCorner {background: #315fa8;}

以上でカスタマイズ完了です。

デモ

実際に反映したデモはこちら

デモページ

こういったブラウザ仕様に依存してしまう箇所を簡単にカスタマイズする事で一層クオリティの高いものを制作していきたいですね！