デモ:複数のスクロールバーを同期

jQuery toolsによる「複数のスクロールバーを同期」の動作デモです。
デモでは3種類のつまみがありますが、1つを移動させるとそのつまみと同じ位置に他のつまみも同期/移動します。

id name class club note status
1 hoge a-1 soccor - good
2 hoge2 a-2 baseball - good
3 hoge3 a-3 - - bad

サンプルコード

HTMLのサンプル

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

<!-- スクロールバーをカスタマイズする対象 -->
<div class="scrollwrap">
	<div class="scroll">
		<table>
		<tr>
		<th>id</th>
		<th>name</th>
		<th>class</th>
		<th>club</th>
		<th>note</th>
		<th>status</th>
		</tr>
		</table>
	</div>
</div>

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

<div class="scrollwrap">
	<div class="scroll">
		<table>
		<tr>
		<td>1</td>
		<td>hoge</td>
		<td>a-1</td>
		<td>soccor</td>
		<td>-</td>
		<td>good</td>
		</tr>
		<tr>
		<td>2</td>
		<td>hoge2</td>
		<td>a-2</td>
		<td>baseball</td>
		<td>-</td>
		<td>good</td>
		</tr>
		<tr>
		<td>3</td>
		<td>hoge3</td>
		<td>a-3</td>
		<td>-</td>
		<td>-</td>
		<td>bad</td>
		</tr>
		</table>
	</div>
</div>

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

CSSのサンプル

#example{
	width: 545px;
	overflow: hidden;
}
/* スクロールする要素のラッパー */
#example .scrollwrap {
	position:relative;
	overflow:hidden;
	width: 545px;	
	border:1px solid #000;
	margin-bottom:15px;
}

/* スクロールする要素 */
#example .scroll { 	
	position:relative;
	width:20000em;	
	padding:1px;
	left:0;
}
#example .scroll table{
	width: 2600px;
}
#example .scroll table,
#example .scroll td,
#example .scroll th{
	border: solid 1px #999;
}
#example .scroll th{
	background: #ccc;
}
#example .scroll th,
#example .scroll td{
	width: 16.5%;
}

#example .slider { 
	position:relative; 
	cursor:pointer;
	height:1px;
	border:2px solid #00118E;	
	width: 545px;	
	margin: 20px 0;
}

#example .progress {
	background-color:#999;
	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});
		},
		// スライダをクリックした時には、animate()を使ってスクロール
		change: function(e, i) {
			scroll.animate({left: -i}, "fast");
			var handleLeft = $(this.getHandle()).css("left");		
			$(".handle").css("left",handleLeft);
		},
		value: 0,
		max: 2000,
		step: 10,
		speed: 0
	
	});
});