スマホ閲覧時のテーブル横スクロール滋賀県守山市のホームページ制作

スマホ閲覧時など横長の表テーブルを見やすくするために、その箇所だけ横スクロールを表示させる。

<div class="scroll_table">
   <div class="scroll_inner">
      ここにテーブル
   </div>
</div>

★CSS

.table_scrollbar,
.scroll_table {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
}

.table_scrollbar {
	height: 20px;
}
.table_scrollbar_inner {
	width: 800px;
	overflow-x: scroll;
	overflow-y: hidden;
	height:20px;
}
.scroll_inner {
	width: 800px;
}

★JS

$(function(){
	$('<div class="table_scrollbar"><div class="table_scrollbar_inner"></div></div>').insertBefore('.scroll_table');
	$('.table_scrollbar').on('scroll', function(){
		$(this).next($('.scroll_table')).scrollLeft($(this).scrollLeft());
	});
	$('.scroll_table').on('scroll', function(){
		$(this).prev($('.table_scrollbar')).scrollLeft($(this).scrollLeft());
	});
});