【JS/jQuery】Simplebarでスクロールバーをアレンジする方法を解説！

こんにちは！コーダーのゆうしです。

今日はスクロールバーのアレンジに便利な『Simplebar』を紹介します。

スクロールバーのデザインをカスタマイズしたいとき、CSSだけで実装しようとするとiOSで表示されなかったり、ブラウザごとに見た目が変わったりと意外と苦労しますよね。そんなときに便利なのが SimpleBar です。導入も簡単でカスタマイズの幅も広いので、実務でもよく使っています。

SimpleBarとは？
SimpleBarの導入方法
1. CDNを使う場合
実際に導入してみる（縦バージョン）
1. 該当のコード
実際に導入してみる（横バージョン）
躓きやすいポイント
まとめ

SimpleBarとは？

SimpleBarはスクロールバーのデザインをブラウザに依存せずカスタマイズできるJavaScriptライブラリです。CSSだけではiOSのSafariでカスタムスクロールバーが表示されない問題がありますが、SimpleBarを使えばiOSでも意図通りに表示できます。

SimpleBarの導入方法

CDNを使う場合

<head> 内に以下のコードを貼り付けるだけで使えます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.js"></script>

最新のCDNはこちらでご確認ください（CDN – Simplebar）

GitHubからダウンロードする場合

CDNを使わずファイルをダウンロードして使いたい場合はGitHub – SimpleBarからどうぞ。

実際に導入してみる（縦バージョン）

See the Pen Untitled by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

該当のコード

<div class="scroll-area" data-simplebar data-simplebar-auto-hide="false">
  <!-- スクロールさせたいコンテンツ -->
</div>

data-simplebar を追加するだけでSimpleBarが適用されます。data-simplebar-auto-hide="false" はスクロールバーを常に表示する設定です。デフォルトはスクロール時のみ表示される仕様なので、常に見せたい場合はこちらを追加してください。

/* バーの背景（トラック部分） */
.simplebar-track {
  background: #E5E5E5;
  border-radius: 10px;
}

/* バーを常に表示させる */
.simplebar-track .simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

/* バー本体の色 */
.simplebar-track .simplebar-scrollbar::before {
  background: #F7C934;
}

各プロパティの役割はこちらです。

クラス名	役割
.simplebar-track	スクロールバーの背景（レール部分）
.simplebar-scrollbar::before	スクロールバー本体の色や形
opacity: 1	バーを常に表示（デフォルトは薄い）