iOSでスクロールバーをCSSのみで表示する方法

スマホを見つめる猫

iOSではスクロールバーが表示されません。
通常のブラウジングでは無意識でWebサイトは縦にスクロールできるものだと思っているので通常は問題になることはないのですが、
ユーザーに明示的にスクロールできると認識させるときにこの仕様が障害になることがあります。

今回はiOSでもスクロールができるということをユーザーに認識させるために、
強制的にスクロールバーを表示させる方法を紹介します。

html

  <div class="scroll-wrap">
    <table>
      <tr>
        <th>見出し</th>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
      </tr>
      <tr>
        <th>見出し</th>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
      </tr>
      <tr>
        <th>見出し</th>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
        <td>テキストが入ります</td>
      </tr>
    </table>
  </div>

css

  .scroll-wrap{
    width: 90%;
    padding: 5%;
    overflow-x: auto;
  }
  .scroll-wrap::-webkit-scrollbar {
    height: 10px;
  }
  .scroll-wrap::-webkit-scrollbar-thumb{
    background: #999;
    border-radius: 5px;
  }
  .scroll-wrap::-webkit-scrollbar-track-piece {
    background: #efefef;
  }