スマホでoverflow:auto;を手軽に実装するには、
Android2.X系のバグとか色々あってとっても面倒です。
最近はAndroid・iPhoneともにoverflow:auto;だけの指定で大丈夫な模様。
さらにiOSも一本指スクロールに対応し、
両OSとも動作レベルが整っているようです。
そこでスマホの小さな画面を有効活用する時に重宝しそうな、
overflow:auto;を手軽に実装してみました。
SPONSORED LINK
height値とoverflow:auto;を指定する
height:120px; overflow:auto;
heightを絶対値で指定し、overflowをautoにします。
すると、高さが固定されたスクロール可能な領域が完成します。
かなり手軽に実装できるのですが、一つ問題が。
スクロール領域だとわかりにくい端末が存在します。
そこでスクロールバーを強制表示しておく事にします。
iOSでスクロールバーを表示させる
-webkit-overflow-scrolling:touch;
iOSは上記CSSで、どこまでスクロールが可能なのかを可視化しましょう。
端末やブラウザによっては、自動でスクロールバーが表示されますので、開発者自身も気付かないケースもあります。
最近ではスマホUIであらゆる部分がスクロール方式で大きなコンテンツを見せるケースも増えています。
その時の一番の問題点はやはり、気付いてもらえない事だと思います。
今回は例にheightでの高さを用いたoverflowテクニックでしたが、色々な場所で活用できると思います。
まとめ
jQueryプラグインなどで全機種対応化させると、Android4.Xでスクロールが効かないバグがあるという堂々巡りなので、力技は極力避けたい所です。
最善の策としては、デフォルトCSSのみで実装可能な範囲までで妥協していく事です。
OS側が対応してくれるのを待つのがベストじゃないでしょうか。
今日も知識欲は止まらない。
