スクロールバーが表示されない。SimpleBarを使おう！【即解決】
こんにちは。カスミです。
さて、以下のような悩みをお持ちですか？
スクロールバーをCSSで実装したが、ブラウザによって表示が異なるし、表示されないデバイス（iphoneなど）がある。。
共通でスクロールバーを表示させたい。
例えば、iphone等はスワイプを実行するとスクロールバーが現れる仕様になっていたりするので、デフォルトで最初から表示されません。
PCのchromeでは検証しても最初から表示されているのに。。
PCでもスマホでも、デバイス・ブラウザ関係なく共通のスクロールバーを表示したいですよね？
このような悩みを解決します。
本記事では、SimpleBarを使って、スクロールバーをブラウザ・デバイス関係なく同じ表示のものを出すやり方について解説していきます。
実装デモ
See the Pen シンプルバー実装デモ by Kohei (@kouk05) on CodePen.dark
SimpleBarの実装デモです。
横・縦共にデフォルトでスクロールバーが表示されているかと思います。
実装手順としては次の通りです。
SimpleBarライブラリをheadに読み込もう
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css"/>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
上記CDNをhead内に読み込ませましょう。
スクロールさせたいhtmlタグにデータ属性を付与
<div class="scroll-area" data-simplebar data-simplebar-auto-hide="false"></div>
スクロールさせたいhtmlタグにdata-simplebarを付与します。
追加で以下を付与することで、スクロールバーを最初から表示させれます。（デフォルトではスクロールしたら現れる）
data-simplebar-auto-hide=”false”
スクロールバーにCSSを付与
最後にスクロールバーを装飾しましょう。
以下クラスにそれぞれCSSを当てると、最低限、自分好みに装飾できるはずです。
.simplebar-scrollbar::before スクロールバーの棒部分装飾
.simplebar-track スクロールバーの背景
.simplebar-scrollbar.simplebar-visible::before デフォルトだとスクロールバーに透過がかかっているので、透過を無くしたい場合はopacity: 1;を追加する
以上で完成です。
まとめ
SimpleBarの実装方法を紹介しました。
SimpleBarライブラリを読み込むだけで簡単に自分好みのスクロールバーが実装ができます。
最新のモダンブラウザ及び、様々なデバイスの表示も共通のものを表示してくれるので、とても便利です。
以上で解説を終わります。
