SimpleBar JavaScriptライブラリを使用して iOSを含むどの環境でも同じデザインでスクロールバーを表示させる方法です。
本ページの説明とデモでは jQuery を使用していますが、使わない場合は公式のドキュメントに方法が載っていますのでそちらを参照してください。

1. SimpleBar の js と CSS を読み込む

CDNで読み込んでいます。ついでにjQueryも読み込んでいます。

HTML

<head>
	<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css">
</head>
<body>
....
	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>

</body>
</html>

2. JavaScript がオフの場合のサポート

JavaScript がオフの場合でも動作するように下記を head に記述しておきます。

HTML

<noscript>
	<style>
	.simplebar-content-wrapper {
		overflow: auto;
	}
	</style>
</noscript>

3. jQuery & HTML & CSS

jQuery

.scroll、scroll__scrollbar、scroll__track は自身のHTMLに合わせて変更してください。

デフォルト状態ではスクロールバーはなぜか非表示になっているため、オプション autoHide: false を設定して最初からスクロールバーを表示しています。

$('.scroll').each((index, element) => new SimpleBar(
	element,
	{
		autoHide: false,
		classNames: {
			scrollbar: 'scroll__scrollbar',
			track: 'scroll__track'
		}
	}
));

HTML

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

CSS

.scroll {
	max-width: 500px;
	background-color: pink;
	overflow-x: auto;
	white-space: nowrap;
}
/* iOSでスクロールバーがダブルで表示されないように */
.scroll ::-webkit-scrollbar {
	display: none;
}
.scroll__inner {
	width: 1000px;
	padding: 10rem;
}
.scroll__scrollbar::before {
	background-color: red;
	content: '';
	height: 20px;
	display: block;
}
.scroll__track {
	background-color: gray;
}

関連記事

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

コメントを残す

メールアドレスが公開されることはありません。