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

鼻炎に悩むYu-ichiです:neko:

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

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

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

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


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

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

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

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

No related posts.

トラックバックURL