Safariでは、デフォルトでスクロールバーが自動的に隠れる設定になっており、スクロールするまで表示されないことがあります。特にコンテンツが多いウェブサイトでは、ユーザーにとってスクロールバーが常に表示されている方が便利な場合があります。この記事では、SimpleBarというJavaScriptライブラリを使用して、Safariで常にスクロールバーを表示させる方法を紹介します。
SimpleBarとは？
SimpleBarは、カスタマイズ可能なスクロールバーを簡単に導入できる軽量なJavaScriptライブラリです。このライブラリを使用することで、どのブラウザでも一貫したスクロールバーのデザインと動作を実現できます。
SimpleBarの導入手順
1. SimpleBarのインストール
まず、SimpleBarをプロジェクトに追加する必要があります。CDNを使用する方法とnpmを使用する方法の2つがあります。ここでは、CDNを使用する方法を紹介します。
HTMLファイルにCDNリンクを追加
HTMLファイルの<head>セクションに以下のリンクを追加します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.css" /><body>セクションの終わりに以下のスクリプトを追加します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.5/simplebar.min.js"></script>2. HTMLにSimpleBarを適用
次に、スクロールバーを表示させたい要素にdata-simplebar属性を追加します。また、スクロールバーを常に表示させるために、data-simplebar-auto-hide="false"属性も追加します。
<div data-simplebar data-simplebar-auto-hide="false" style="max-height: 300px;">
<!-- スクロール可能なコンテンツ -->
<p>コンテンツがここに入ります。</p>
<p>コンテンツがここに入ります。</p>
<p>コンテンツがここに入ります。</p>
</div>この例では、div要素にdata-simplebarおよびdata-simplebar-auto-hide="false"属性を追加し、最大高さを300pxに設定しています。この要素のコンテンツが多い場合、カスタムスクロールバーが常に表示されます。
3. カスタマイズ (オプション)
SimpleBarのデフォルトスタイルをカスタマイズしたい場合は、CSSを追加することができます。たとえば、スクロールバーの色を変更するには、以下のようなCSSを追加します。
.simplebar-scrollbar::before {
background-color: #3498db; /* スクロールバーの色 */
}まとめ
SimpleBarを使用することで、Safariでも常にスクロールバーを表示させることができます。このライブラリは他のブラウザでも一貫した動作を提供し、ユーザーエクスペリエンスを向上させるのに役立ちます。ぜひ試してみてください。
