iPhoneやiPadでスクロールバーを表示する

鼻炎に悩むYu-ichiです

とにかく鼻水がとまりません。
後鼻漏っぽく、喉もやられてます・・・。

今回はiPhoneやiPadでスクロールバーを表示する方法です。
CSSで縦横を固定したブロックにスクロールバーを付けて中のコンテンツを表示したときに、iPhoneやiPadでみるとスクロールバーが表示されていません。
表示はされていないだけで、スクロールはできます。
でもバーが無いとスクロールできるって認識しづらいですよね。
実際に自分も最初は気が付きませんでした。

そこで、CSSを使ってスクロールバーを表示させる方法をご紹介します。

<div class="scroll-contents">
<p>この中がスクロールします</p>
</div>

まず適当にボックスを用意します。
 次にCSSを書きます。
このときに「-webkit」を使います。

div.scroll-contents {
  overflow-y:auto;
}
div.scroll-contens::-webkit-scrollbar {
  background:#ccc;
  width:10px;
}
div.scroll-contens::-webkit-scrollbar-thumb {
  background:#aaa;
}

これでiPhoneやiPadで見たときにもスクロールバーが表示されるようになります。
「-webkit-scrollbar」で、スクロールバー全体の色とサイズを決めて、
「-webkit-scrollbar-thumb」で、スクロールバーの動かす部分の色を決めています。
角丸のデザインにするなど、ほかの装飾も可能です。

スマホサイトのデザインをするときは、細かな部分でPCとは違うものが多いので気を付けましょう。

巷ではインフルエンザが流行っているらしいので、皆さんもお気を付けください。