スマホでoverflow:auto;を手軽に実装する


スマホで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側が対応してくれるのを待つのがベストじゃないでしょうか。

今日も知識欲は止まらない。

SPONSORED LINK
トップへ戻る