スクロールさせるレイアウトの場合、
高さを固定してはみ出した分は
HTML
1 2 3 4 5 6 7 8 9 | <div> <p>スクロールのレイアウトです</p> <p>スクロールのレイアウトだよ</p> <p>スクロールのレイアウトだってば</p> <p>スクロールのレイアウトだってばよ</p> <p>スクロールのレイアウトだってんだ</p> </div> |
CSS
1 2 3 4 5 6 | div{ height:○○px; overflow:auto; } |
とすればスクロールバーが表示される仕組みです。
ところがタッチデバイスの場合はスクロールバーが表示されず
ユーザーにスクロールできるエリアだとわかりにくかったり、
いざスクロールするときスムーズに動かなかったりします。
タッチデバイス対策で、以下のCSSを加えることをオススメします。
CSS
1 2 3 4 5 6 7 | div{ /* スクロールをスムーズにする */ -webkit-overflow-scrolling:touch; overflow-scrolling:touch; } |
コメント