スクロールバーを常時表示したいことがあります。例えば、注意事項の欄とか、新着情報一覧とか。スクロールバーがないと、続きがあることが分かりにくいので困る。
特に、Macのブラウザでは基本的にスクロールしてない時には、スクロールバーが消える仕様になっています。なので、分かりにくさMAX！
SimpleBar
常にスクロールバーを表示するために、今回は、SimpleBarというライブラリを使いました。
SimpleBarはデフォルトのスクロールバーをCSSで置き換えるものです。JavaScriptで無理やり書き換えないので、パフォーマンスが落ちたり変な挙動が起こらないとのこと！
導入・実装も非常に簡単でした😉
ライブラリの読み込み
まずは、SimpleBarのCSSとJavaScriptを両方読み込みます。
CDNで読み込む場合は以下。
https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.css
https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js本当はファイルで読み込みたかったのですが、nmpを使わない場合のファイルがどのファイルを使うのかわからず…。GitHubでファイル群をダウンロードしてみるものの、それらしきファイルが見当たらず〜…。なので、今回はCDNを使いました。
データ属性を付与
スクロールバーを常時表示させたい部分に、以下のデータ属性を追加します。
data-simplebar data-simplebar-auto-hide="false”例えば、以下のように。
<div data-simplebar data-simplebar-auto-hide="false”></div>これで、常時スクロールバーが表示されます！
注意点としては、CSSでスクロールを表示する設定にしている必要がある点です。そもそもスクロールが発生しない場所にこのデータ属性を設置しても、スクロールバーは表示されません。 overflow: auto;を指定したり、高さを指定してスクロールバーは表示されるようにしておきましょう。
Macへの対応
SimpleBarはMac・iOSにも対応しています。
Macのブラウザでは基本的にスクロールバーが非表示になる仕様です。しかし、SimpleBarを使えば常時スクロールバーを表示することが可能です。
CSSの崩れ
このライブラリでは、独自のHTML構造が内側に生成されるため、CSSが崩れることがあります。その場合は、ソースコードを見て値を上書きすればOK！
今回の場合はsimplebar-contentクラスにCSSを適応しました。
iOS Safariでデフォルトのスクロールと重なって表示される
iPhoneでスクロールをしたところ、デフォルトのスクロールと重なって表示されてしまいました。 iOSのバージョン13以降でこの問題がみられるとフォーラムにありました。
SimpleBarを使用している要素に対して、以下のように指定します。これは、デフォルトのスクロールバーを非表示にするという指定です。
::-webkit-scrollbar {
display: none;
}ページの一部のみにSimpleBarを使用している場合は、ページ全体に適用しないように注意です。
おわりに
SimpleBarで簡単にスクロールバーを常に表示できるようになりました。
ここまで簡単なのは驚き！
意外と、スクロールバーを常に表示したい場面は多いので助かります。
