SimpleBar JSライブラリを使ってどのデバイスでも同じデザインのスクロールバーを表示する
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 で横スクロールバーを上下に表示する