CSSの知識は多少必要ですが、細やかに縦スクロールバーをカスタマイズすることが可能です。
スクロール時のイージングにも対応しています。
jQuery等のライブラリは必要なく単独で動きます。

DEMO

/common/btn_demo_off.gif” alt=”DEMO” width=”253″ height=”46″ />

ダウンロード

/common/btn_download_off.gif” alt=”DOWNLOAD” width=”253″ height=”46″ />

使用にあたっての注意

1. 再配布はご遠慮くださいませ
2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
4. 使用に関しては自己責任でお願いいたします。
5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にvertical.scrollbar.jsを読み込みます。

<script type="text/javascript" src="vertical.scrollbar.js"></script>

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。

var scroll = new ATScrollbar({
	scroll : 'scroll',
	scrollInner : 'scrollInner',
	scrollbar : 'scrollbar',
	track : 'track',
	thumb : 'thumb',
	up : 'up',
	down : 'down',
	interval : 10,
	duration : 600,
	easing : 'quinticOut'
});
scroll.load();

デザインのカスタマイズ方法

HTMLは下記のように記述します。スクロールさせたい要素は .scrollInner の中に入れてください。
ただ、.scrollInnerにはスタイルを設定しないでください。
仕様上デザインが崩れる可能性がありますので、スタイルが必要な場合は中の要素にスタイルを設定してください。

<div id="scroll">
	<div class="scrollInner"><!-- スクロールさせたい要素 --></div>

	<div class="scrollbar">
		<p class="up"><a href="javascript:void(0);"></a></p>
		<div class="track">
			<div class="thumb"></div>
		</div>
		<p class="down"><a href="javascript:void(0);"></a></p>
	</div>
</div>

CSSは下記のように記述します。

#scroll {
	position: relative;
	width: 300px;
	height: 300px;
	overflow: hidden;
	border: 1px solid #DDD;
}

#scroll .scrollbar {
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 300px;
	z-index: 1;
}

#scroll .scrollbar .track {
	position: absolute;
	top: 5px;
	left: 0;
	background: #EEE;
	width: 5px;
	height: 290px;
	z-index: 2;
}

#scroll .scrollbar .track .thumb {
	position: absolute;
	top: 0;
	left: 0;
	background: #CC3300;
	width: 5px;
	z-index: 3;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

#scroll .scrollbar .up {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 5px;
	background: #DDD;
	z-index: 2;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

#scroll .scrollbar .down {
	position: absolute;
	top: 295px;
	left: 0;
	width: 5px;
	height: 5px;
	background: #DDD;
	z-index: 2;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

設定可能オプション

scroll : ‘scroll’
カスタマイズさせたいスクロールがある大本のID名です。

scrollInner : ‘scrollInner’
スクロールの内容を入れるClass名です。

scrollbar : ‘scrollbar’
スクロールバーのClass名です。

track : ‘track’
スクロールバーのトラック部分のClass名です。(スクロールバーの背景部分)

thumb : ‘thumb’
スクロールバーのサム部分のClass名です。(スクロールバーのつまみ部分)

up : ‘up’
スクロールバーの上ボタンのClass名です。
（必要ない場合はfalseを指定してください）

down : ‘down’
スクロールバーの下ボタンのClass名です。
（必要ない場合はfalseを指定してください）

duration : 600
アニメーションの時間の長さです。

interval : 10
アニメーションが動作する一定間隔の時間です。

animation : ‘quinticOut’
アニメーションの種類が設定可能です。
liner、quinticOut、quinticInの3種類の動きが可能です。
アニメーションを無効にするにはfalseを指定してください。