iOS(Safari)でスクロールバーを常に表示したい...CSSだけでは表示できない!?


サイト構築

iOS-Safari-スクロールバーを常に表示_eyecatch

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

以前までの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のデベロッパーツールで確認してみます。

iOS-Safari-スクロールバーを常に表示_001

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

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

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

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

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

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

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

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

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

外部リンク

どうやら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」の本体は以下のサイトからダウンロードできました。

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

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

  • jquery.js
  • jquery.nicescroll.min.js

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を指定する必要があります。

nicescrollの動作確認

実際にnicescrollを使ってスクロールバーを常に表示してみた様子が以下のGIFです。

iOS-Safari-スクロールバーを常に表示_004

一応スクロールバーは常に表示できる(GIF)

一応スクロールバーを常に表示することは出来たのですが…
縦スクロール時にスクロールバーが点滅します。そして横スクロールがカクつく感じもあります。で、ひどい時には縦も横もスクロールが出来なくなります。

初めは結構良い感じ!と思ったのですが、残念ながら本番環境(特に対スマホ)では使わない方が良さそうだと思いました。

perfect-scrollbarを使ってみようとするも失敗

jQueryの「nicescroll」は実質使えない感じだったので、続いてJavaScriptの「Perfect Scrollbar」というのを使ってスクロールバーを自前で用意しようと試しました。

結果、以下のようなエラーで詰まりました。

Uncaught Error: no element is specified to initialize PerfectScrollbar

う~ん使い方はあっているはずなんですけどねぇ...。

調べると「Perfect Scrollbar」はバージョンによって不具合が出る様子です。
どのバージョンが安定で、どの程度のデバイスに対応しているのか分からないため、やはり本番環境では使えません。

エラー解決が面倒なので以下の「Perfect Scrollbar」のデモページにiPhoneの実機でアクセスしてみたところ、そもそもページが崩れてしまっていました…。

外部リンク

【Perfect Scrollbarのデモページ】
Perfect Scrollbar v5 - Live Preview - code helper

やっぱりだめなのかー!

スポンサーリンク

結論:スクロールバーの挙動は触らない方が吉

ここまで書いた通り、最新のiOS(16.2)のSafariでスクロールバーを常に表示するのは相当面倒...というかCSSはもちろん、jQueryやJavaScriptを使っても無理でした。

実機でここまで動かないとなると、仮に実装できたとしても他のデバイスで不具合が出る可能性も高いと思います。

この検証を行うにあたって色々調べた中で、スクロールという挙動は重要な操作なので、Webページごとに設定するよりは今はまだ各種スマホ端末の処理に任せるという感じになっているというのを見つけました。

ブラウザやOS間の互換性が完璧になるレベルまでは、各種端末のデフォルトの動作に任せておいた方が良いという事ですね。

という事で歯切れの悪い結論です。
iOS、Safariでスクロールバーを常に表示するのはほぼ無理、触らない方が無難です。

CSSの疑似要素などでテーブルの下あたりに「スクロールできます→」みたいな文章を突っ込むのが現状一番良い方法かなと思います。はい。

まとめ

以上、iOS(Safari)でスクロールバーを常に表示しようとしたらほぼ無理でした。

JavaScriptで無理やりスクロールバーを実装するのは、今後のOSアップデートなども考えると危険です。そもそも初めの理由は“スクロールバーが常に表示されていたら分かりやすいだろうなぁ~”くらいのものだったのでキッパリ諦めるのが吉ですね。

また何か良い方法があったら別記事にしてリンクします。

最後までお読みいただいた方、解決に至らず申し訳ないです。
どうやっても厳しいということが伝われば幸いです。ではではこのへんで・w・

-サイト構築
-, ,

ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。

© 2022 ソロ学