iPhoneでもスクロールバーを常に表示させる

公開日: 2023.02.21
最終更新日: 2026.07.08

Webページで部分的に横スクロールを見せたいとき、ユーザーに「ここは横スクロールできる」と気づいてもらう必要があります。気づかれないと、そのままスルーされてしまうからです。PCブラウザならoverflow-x: scrollやoverflow: autoを指定すれば横スクロールバーが表示されて気づいてもらえますが、iPhoneではそう簡単にいきません。この記事では、iPhoneでもスクロールバーを常時表示させる方法を、SimpleBarというライブラリを使って解説します。

1 iPhoneでスクロールバーが消える理由
2 SimpleBarで解決する
3 スクロールバーのデザインをカスタマイズする
4 まとめ

iPhoneでスクロールバーが消える理由

iPhoneでは、指で画面をスクロールしている間しかスクロールバーが表示されず、指を離すと自動的に消える仕様になっています。以前はCSSの-webkit-scrollbarを指定することで常時表示できましたが、iOS13以降はこれが効かなくなりました。そのため、CSSだけでiPhoneのスクロールバーを常時表示させるのは難しくなっています。このままでは、iPhoneユーザーに横スクロール部分を見落とされてしまいます。

SimpleBarで解決する

そこで使えるのがSimpleBarです。スクロールバーをカスタマイズできるJavaScriptライブラリで、iOSでもスクロールバーを表示させられます。使い方は簡単な3ステップです。

1. CSSとJSを読み込む

CDNを使う場合は、<head>内にCSSを、</body>の直前にJSを読み込みます。

<!-- CSS（head内） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css" />

<!-- JS（body終了タグの前） -->
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

2. スクロールさせたい要素にdata-simplebar属性を追加

横スクロールを表示させたい要素にdata-simplebar属性を付け、CSSでoverflow: autoを指定します。

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

.scroll-area {
  overflow: auto;
}

3. 常時表示のオプションを設定する

スクロールバーを常に表示したい場合は、data-simplebar-auto-hide="false"属性を追加します。これで、スクロールしていないときもスクロールバーが表示されたままになります。

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

スクロールバーのデザインをカスタマイズする

SimpleBarを使うと、スクロールバーの見た目もCSSで自由に調整できます。SimpleBarが生成する要素に対してスタイルを当てます。

/* スクロールバーのつまみ部分 */
.simplebar-scrollbar::before {
  background-color: #00608d;
}

/* つまみの太さ */
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  height: 6px;
}

標準のスクロールバーはCSSでのカスタマイズに限界がありますが、SimpleBarを使えばこうした見た目の調整も簡単にできます。iPhoneでの表示に困ったときはもちろん、スクロールバーのデザインにこだわりたいときにもおすすめのライブラリです。

まとめ

iOS13以降、CSSだけではiPhoneのスクロールバーを常時表示できなくなりました。SimpleBarを使えば、data-simplebar属性とdata-simplebar-auto-hide="false"を指定するだけで、iPhoneでもスクロールバーを常時表示できます。横スクロールのコンテンツを見落とされたくないときに活用してください。