デモ:div要素のスクロールバーをカスタマイズ

jQuery toolsによる「div要素のスクロールバーをカスタマイズ」の動作デモです。

サンプルコード

HTMLのサンプル

<!-- スクロールバーをカスタマイズする対象 -->
<div id="scrollwrap">
	<div id="scroll">

	</div>
</div>

<!-- スクロールをコントロール -->
<input type="range" max="2600" step="10" />

CSSのサンプル

#example{
	width: 545px;
	overflow: hidden;
}
/* スクロールする要素のラッパー */
#example #scrollwrap {
	position:relative;
	overflow:hidden;
	width: 545px;	
	height:360px;
	border:1px solid #000;
	margin-bottom:15px;
	-moz-box-shadow:0 0 20px #666;
	-webkit-box-shadow:0 0 20px #666;
}

/* スクロールする要素 */
#example #scroll { 	
	position:relative;
	width:20000em;	
	height:360px;
	padding:20px 0;
	background:url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/pic/2000.jpg);
	text-shadow:5px 1px 1px #000; 
	left:0;
} 

#example .slider { 
	position:relative; 
	cursor:pointer;
	height:1px;
	border:2px solid #00118E;	
	width: 545px;	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

#example .progress {
	background-color:#00118E;
	height:3px;
	position:absolute;
	width:0;
}

#example .handle { 
	border:1px solid #cfcfcf;
	background-color:#fff;
	height:20px;
	width:80px;
	position:absolute; 
	top:-12px;
	display:block;
	cursor:move;
	-moz-border-radius:14px;
	-webkit-border-radius:14px;
}

#example .handle:active {
	background:blue;		
}

#example .range {
	display:none;
}

Javascriptのサンプル

$(function() {
	// scrollable DIVを取得
	var scroll = $("#scroll");
	
	// 初期化
	$(":range").rangeinput({
		// スライダが移動するのに合わせて、css値を変化
		onSlide: function(ev, step)  {
			scroll.css({left: -step});
		},
		progress: true,
		value: 100,
		// スライダをクリックした時には、animate()を使ってスクロール
		change: function(e, i) {
			scroll.animate({left: -i}, "fast");
		},
		// クリックした時のアニメーション速度は0に
		speed: 0
	
	});
});