iOS（Safari）でスクロールバーを常に表示したい...CSSだけでは表示できない！？

スマホ閲覧時に画面からはみ出したテーブル要素などを横スクロールで表示する事がありますが、このスクロールバーを常に表示できないか？という内容です。

以前までのiOSのバージョンならCSSの「-webkit-scrollbar」というプロパティを使うだけで簡単にスクロールバーを常に表示出来たのですが、新しいiOSでは消えてしまうようです。

CSSではダメなのでJavaScript（jQuery）で何とかできないか考えました。

結論：一応スクロールバーを常に表示することは可能でしたが、やや難ありなので触らない方が良さそうです。

この記事の目次

iOS(Safari)でスクロールバーを常に表示する

スマホなどの画面が小さいデバイスに対して、テーブル要素などの横長の表のようなコンテンツを表示する時には横スクロールが良く使われます。

表を横にスクロールできることは周知されている動作だとは思いますが、いい感じに画面の端で表がピッタリ切れていると自分で見ても横にスクロールできるのかどうか分からない事があります。

そこでCSSやJavaScript（jQuery）を使って横のスクロールバーを常に表示する方法をご案内します。このスクロールバーですが、今のiPhone。つまりiOS（Safari）ではスクロール時にしか表示されないんですねぇ...。ここら辺も書きたいと思います。

CSSの「-webkit-scrollbar」を使う方法

スマホのスクロールバーを常に表示する方法で調べると一番良く出てくるのが、CSSの「-webkit-scrollbar」というプロパティを使う方法です。

お手軽で安全なのがCSS（スタイルシート）を使う方法なので、iPhoneにスクロールバーを常に表示させる方法として有名だった方法です。しかし、CSSのみで実装するこの方法は現行のiPhone（iOS-Safari）には効きません。

どういうことか？実装方法も踏まえて順番に見ていきます。
まず「-webkit-scrollbar」を使う時のテンプレは以下のような感じです。

/*はみ出す要素を横スクロールで表示（autoでも可）*/
.scroll-box {
    overflow-x: scroll;
}
/*スクロールバー全体*/
.scroll-box::-webkit-scrollbar {
    width: 5px;
}
/*スクロールバーのつまみ部分*/
.scroll-box::-webkit-scrollbar-track {
    background-color: rgb(0, 0, 255);
}
/*スクロールバーの背景部分*/
.scroll-box::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px rgb(255, 0, 0);
}

このCSSについては調べれば沢山出るので、詳しい内容はここでは割愛します。

上のようなCSSが用意できたら、あとは画面からはみ出した時に横スクロールで表示したい要素をこのクラスで囲むだけです。

<div class="scroll-box">
～はみ出した時に横スクロールで表示したい要素～
</div>

こんな感じです。これをChromeのデベロッパーツールで確認してみます。

Chromeのデベロッパーツールでスマホ画面を確認した様子

iPhone XRのデモモードで確認してみたところ、無事に反映されています。
また、この状態ではスクロールバーは常に表示されている状態です。

スマホ実機でスクロールバーが表示されない

CSSの「-webkit-scrollbar」で難なくスクロールバーを常に表示することが出来た！と思いきや...現在はそう簡単にはいきません。

iPhone12 mini（iOS16）のSafariで確認してみた様子が以下です。

: CSSで実装したスクロールバーが表示されない

: 実際には横スクロールした時だけ表示される

CSSでスクロールを常に表示したはずが実機では表示されていません。
右の画像のようにスクロールした時は表示されるのですが、スクロールしていないと自動的に消えてしまいます。

えぇ、これはSafariの標準の仕様ですね。「-webkit-scrollbar」が無視されてます...。
プロパティ全てに!importantを付けてももちろん効きません。

CSSの「-webkit-scrollbar」が効かない原因はiOSのバージョン

ここで調べてみると同じような質問が以下のサイトにありました。

外部リンク

【参考リンク：teratail様】
スマホで横スクロールバーが表示されなくなった

どうやらiOS13以降はCSSでスクロールバーを常に表示できないようです。

この他にも色々調べて勉強しました。
「-webkit-scrollbar」とiOSの要点をまとめると以下のような内容のようです。

iOS12まではCSSの「-webkit-scrollbar」が効く。
iOS13以降のバージョンでは「-webkit-scrollbar」が効かない。
原因はiOS13以降で慣性スクロールがデフォルトで有効になったため。
慣性スクロールを使うと「-webkit-scrollbar」は使えない。（多分）

直接の原因はiOSの仕様変更が原因のようです。

外部リンク

【参考：Apple公式リリースノート（iOS13）】
Safari 13 Release Notes | Apple Developer Documentation

慣性スクロールを無効にすれば以前のように「-webkit-scrollbar」が使えるのでは？と思ったのですが「-webkit-appearance: none;」を使ってもダメでした。OSレベルで効かなくなっているようです。

以上をまとめると、今のiPhone（iOS13以降）に対してCSSだけでスクロールバーを常に表示させるのは無理だということです。

どうしても常に表示させたいならJavaScript（jQuery）等で自前のスクロールバーを用意するしかないとのこと...。やってみましょう。

jQueryのnicescrollを使ってスクロールバーを実装してみる

先ほどの参考リンク内にもありましたが、jQueryの「nicescroll」というプラグインを使えばスクロールバーを自前で用意することが出来るとのことなので試してみます。

先に結論

一応最新のiOS（16.2）のSafariでもスクロールバーを常に表示することは可能でしたが、動きがカクついて使い物になりませんでした。

「nicescroll」の本体は以下のサイトからダウンロードできました。

外部リンク

【nicescrollのDL先】
GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad

GitHubなので「Code」のプルダウンから「Download ZIP」を押せばファイル一式をダウンロードすることが出来ます。

なお「nicescroll」を使うために必要なファイルは実質以下の２点だけです。

jquery.js
jquery.nicescroll.min.js

jQueryの本体についてはサイトで既に読み込んでいれば不要です。

サイトで使用中のjQueryのバージョンを確認する方法３つ。

このファイルをサイトのヘッダーなどで読み込みます。

<script src="～各サイトパス/jquery.js"></script>
<script src="～各サイトパス/jquery.nicescroll.min.js"></script>

次にHTML内やjs内で「nicescroll」の設定を行います。

<!--HTMLで読み込む場合。なおWordPressの場合は$をjQueryに変更して使う-->
<script>
$(document).ready(
  function() {
    $(".scroll-box").niceScroll({cursoropacitymin: 1});
  }
);
</script>

基本は$("idやclass名").niceScroll();としてやれば良いのですが、スクロールバーを常に表示するにはオプション値にcursoropacitymin: 1を指定する必要があります。