WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >CSS

横幅がはみ出た部分をスクロールできるようにしたいとき、高さがあるテーブルなどでは下のスクロールバーのみでは不便な場合があります。
そんなときに使える、CSS・Jqueryを使用し上下が連動するスクロールバーを実装する方法をご紹介します！

HTML

HTMLコードです。
クラス名”scrollbar”でスクロールバーを表示させています。

<div id="containar">
	<div class="scrollbar" id="scrollbar">
		<div class="bar_inner"></div>
	</div>
	<div class="scrollbox" id="scrollbox">
		<div class="box_inner">
			<table class="table">
				<tr>
					<th>見出し1</th>
					<th>見出し2</th>
					<th>見出し3</th>
					<th>見出し4</th>
					<th>見出し5</th>
					<th>見出し6</th>
					<th>見出し7</th>
					<th>見出し8</th>
					<th>見出し9</th>
					<th>見出し10</th>
				</tr>
				<tr>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
				</tr>
				<tr>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
				</tr>
				<tr>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
				</tr>
				<tr>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
					<td>コンテンツ</td>
				</tr>
			</table>
		</div>
	</div>
</div>

CSS

全体を囲っている#containarにwidthをつけ、.scrollboxに”overflow-x:scroll;”を設定することで下のスクロールバーを表示しています。
これだけでは上のスクロールバーは動作しません。

#containar {
	width: 500px;
	padding: 100px;
}
.scrollbar {
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
}
.bar_inner {
	height: 1px;
}
.scrollbox {
	width: 100%;
	margin-top: 5px;
	overflow-x: scroll;
	overflow-y: hidden;
}
.box_inner {
	margin-bottom: 5px;
}
table {
	min-width: 1000px;
	border-collapse: collapse;
	border-spacing: 0;
	border: 2px solid #979797;
	width: 100%;
	box-sizing: border-box;
	margin: 20px auto;
}
table th, table td {
	width: 10%;
	border: 2px solid #979797;
	text-align: center;
}

Jquery

Jqueryで動作をさせます。

$(function () {
	$("#scrollbar, #scrollbox").on("scroll", function () {
		if ($(this).attr("id") === "scrollbar") {
			//scrollLeftでスクロール量を取得
			$("#scrollbox").scrollLeft($(this).scrollLeft());
		} else {
			$("#scrollbar").scrollLeft($(this).scrollLeft());
		}
	});
	//.tableの幅取得
	var w = $('.table').width();
	//.tableの幅を"bar_inner"のwidthとする
	$('.bar_inner').width(w);
});

scrollLeftでスクロール量を取得し、上下が連動するようにしています。
また、$(‘.table’).width(); でテーブルの幅を取得し、上のスクロールバー”.bar_inner”のwidthに設定することでテーブルの内容を修正して幅が変わっても問題なく動作します。

まとめ

今回は4行の高さのないテーブルでしたが、もっと高さのある要素のときに使えると思います。
ぜひ覚えて実装してみてください！