スマホで横スクロールバーが表示されなくなった

Question

テーブルの表示を、スマホ時は横スクロールできるようにし、常にスクロールバーを表示させるようにしていましたが、iPhoneX ios13.3.1で確認したところ、スクロールバーの常時表示が無効になっており、動かしている時しか表示されなくなっていました。

因みに、ios10.3.4ではスクロールバーは常に表示されており、慣性スクロールは無効になっていますが、ios13.3.1は慣性スクロールが自動的に有効になっているようです。

ios13.3.1でもスクロールバーを常に表示させる方法はありますか？

<div class="table-wrap">
 <table>
  <tbody>
   <tr>
    <td>あああ</td>
    <td>いいい</td>
    <td>ううう</td>
   </tr>
    .
    .
    .
  </tbody>
 </table>
</div>

.table-wrap {
    overflow-x: scroll;
    padding-bottom: 10px;
}

.table-wrap::-webkit-scrollbar {
    height: 5px;
}

.table-wrap::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eee;
}

.table-wrap::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #999;
}

Answer 1

私が調べた限りでは、cssでスクロールバーを常に表示させるのはiOS13でSafariの仕様が変わったことにより、不可能になったようです。

参考：
https://qiita.com/kakuta_yu/items/626d7feecf54e39f7127
https://stackoverflow.com/questions/59265225/always-show-scrollbar-on-safari-ios-13

標準のスクロールバーではなく、スクロールバーに見えるものを自前で用意して表示させるようなJavaScriptのプラグインは存在しているので、どうしても常時表示させたければこういうものを使うのが良いかと思います。
https://nicescroll.areaaperta.com/demo/

Comments

[asako-]

ご回答ありがとうございました。やはり仕様なのですね…
次回からnicescroll検討してみます。