jQuery と CSS で横スクロールバーを上下に表示する

jQuery と CSS を使って下だけでなく上にも横スクロールバーを設置する方法です。

HTML

<div class="scroll">
	<div class="scroll__inner">
		横スクロール横スクロール<br>
		横スクロール横スクロール<br>
		横スクロール横スクロール<br>
		横スクロール横スクロール<br>
		横スクロール横スクロール
	</div>
</div>

CSS

.top-scrollbar,
.scroll {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 300px;
}

.top-scrollbar {
	height: 20px;
}
.top-scrollbar__inner {
	width: 1000px;
	overflow-x: scroll;
	overflow-y: hidden;
	height:20px;
}
.scroll__inner {
	width: 1000px;
	background-color: pink;
	padding: 3rem;
}

jQuery

$(function(){
	$('<div class="top-scrollbar"><div class="top-scrollbar__inner"></div></div>').insertBefore('.scroll');
	$('.top-scrollbar').on('scroll', function(){
		$(this).next($('.scroll')).scrollLeft($(this).scrollLeft());
	});
	$('.scroll').on('scroll', function(){
		$(this).prev($('.top-scrollbar')).scrollLeft($(this).scrollLeft());
	});
});

応用

スクロールバーのデザイン変更

::-webkit-scrollbar は必ず設定すること。これが無いとデザイン変更ができない。

.scroll::-webkit-scrollbar,
.top-scrollbar::-webkit-scrollbar{
	width: 20px;
}
.scroll::-webkit-scrollbar-track,
.top-scrollbar::-webkit-scrollbar-track {
	background: lightgray;
}
.scroll::-webkit-scrollbar-thumb,
.top-scrollbar::-webkit-scrollbar-thumb {
	background: red;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px #fff;
}

.top-scrollbar__inner の幅 に .scroll__inner の幅を自動で適用する場合

CSS で.top-scrollbar__inner の width を削除し、下記を足して下さい。

$('.top-scrollbar__inner').each(function() {
	$(this).width($(this).parent('.top-scrollbar').next('.scroll').find('.scroll__inner').innerWidth());
});

---

関連記事

SimpleBar JSライブラリを使ってどのデバイスでも同じデザインのスクロールバーを表示する