SimpleBar の導入と使い方
iOS Safariでスクロールバーが出ない問題について
Webアプリを作ってると、
「え、これスクロールできるのに、スクロールバー出てないじゃん…」
って思うこと、ありませんか？
特にiOS版のSafariだと、
- そもそもスクロールバーが基本「隠れる」設定になってたり、
- overflow: auto をちゃんと書いてもスクロールバーが見えなかったりして、
ユーザーがスクロールできることに気づかないんですよね。
特にチャットボックスとか、カードリストみたいな小さめのエリア
そんなときに助けてくれるのが、SimpleBar というライブラリです。
SimpleBarってなに？
SimpleBarは、簡単に言うと
「スクロールの動きはそのままに、見た目だけカスタムできる」ツールです。
- スクロールの挙動はネイティブそのまま（JavaScriptで無理やり再実装とかしない）
- パフォーマンスにも優しい
- スクロールバーのデザインをCSSで自由にいじれる
導入前
導入後
対応ブラウザ
| ブラウザ | 対応状況 |
|---|---|
| Chrome | ✔️ |
| Firefox | ✔️ |
| Safari | ✔️ |
| Edge | ✔️ |
| IE11 | ✔️（制限あり） |
※ IE10以前は非対応です。
インストール方法
npm / yarnで入れる場合
shell
npm install simplebar resize-observer-polyfill --save
# または
yarn add simplebar resize-observer-polyfill
CDN（タグで読み込みたい人向け）
<!-- jsDelivr（推奨） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />
<script src="https://cdn.jsdelivr.net/npm/simplebar@lastes/dist/simplebar.min.js"></script>
<!-- または unpkg -->
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
使い方
1. HTMLに data-simplebar を付けるだけ
<div data-simplebar style="max-height: 300px;">
スクロール可能なコンテンツ...
</div>
2. CSSとJSをちゃんと読み込む
モジュールバンドラ（Webpackとか）を使ってる人は：
import 'simplebar';
import 'simplebar/dist/simplebar.css';
import ResizeObserver from 'resize-observer-polyfill';
window.ResizeObserver = ResizeObserver;
これでOK！
手動で初期化したいときは？
SimpleBarは、普通にdata-simplebarをつけるだけで動くんですけど、
「動的にDOMを追加したとき」とか「自分で好きなタイミングで制御したいとき」は、手動で初期化もできます。
単一の要素に適用する場合（Vanilla JS）
new SimpleBar(document.getElementById('myElement'));
複数の要素に一括適用する場合（Vanilla JS）
Array.prototype.forEach.call(
document.querySelectorAll('.myElements'),
(el) => new SimpleBar(el)
);
jQueryで使う場合
// 単一要素
new SimpleBar($('#myElement')[0]);
// 複数要素
$('.myElements').each((_, el) => new SimpleBar(el));
jQueryを使うときは、必ず [0] で「DOM要素」に変換するのを忘れずに！
よく使うオプション設定
スクロールバーを常に表示したいとき
デフォルトでは、スクロールしてるときだけ出てきますが、常に出しっぱなしにしたい場合はこうします。
HTMLで指定する場合
<div data-simplebar data-simplebar-auto-hide="false"></div>
JSで指定する場合
new SimpleBar(document.getElementById('myElement'), { autoHide: false });
スクロールバーのデザインを変えたい！
これはCSSで普通にカスタマイズできます。
.simplebar-track.simplebar-vertical {
width: 10px;
background: #B5B5B5;
}
.simplebar-scrollbar {
background: #41485B;
border-radius: 10px;
}
好きなデザインにしてOK！
よくあるエラー対策
-
スクロールバーが表示されないときは、「ResizeObserverのpolyfill」がちゃんと読み込まれてるか確認。
-
うまくスタイルが当たらないときは、SimpleBarが適用される要素に無理なスタイルを当てすぎないように注意。
Discussion