コーディング

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

2017.02.06

2017.05.29

スマホを見つめる猫

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;
  }

::-webkit-scrollbar

スクロールバーの大きさの設定をします。widthで縦のスクロールバーの幅を設定し、heightで横のスクロールバーの高さを設定します。

::-webkit-scrollbar-thumb

スクロールバーの移動するバーの設定します。背景色で色の設定などをします。角丸の設定もできます。

::-webkit-scrollbar-track-piece

スクロールバーの移動するバー以外のベースの部分の色を設定します。

上記を設定すると、iOSでも強制的にスクロールバーを表示できるので、新着情報などでスクロールができることを明示的に伝えるときや、複雑なテーブルなどを横スクロールさせて表示させる時などに使用できるかと思います。

参考にしてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。