鼻炎に悩む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とは違うものが多いので気を付けましょう。
巷ではインフルエンザが流行っているらしいので、皆さんもお気を付けください。
