【コーダー必見】Simplebarでスクロールバーをアレンジする方法を解説！

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

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

cssでも作れるのですが、ios対応していなかったりなんなりとイライラすることがあったので、『Simplebar』をいれてサクッと作るのがおすすめです。

『SimpleBar』のダウンロード
実際に導入してみる（縦バージョン）
1. 該当のコード
実際に導入してみる（横バージョン）
まとめ

『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でダウンロードする場合はこちら

ダウンロードはこちら（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』『data-simplebar-auto-hide=”false”』を貼り付けるだけです。『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;　/* ここでバーの色を設定 */
}

該当するCSSはこんな感じです。デザインに合わせて適宜色や形を変えていきましょう。