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

sumaho_overflow_auto.png
スマホでoverflow:auto;を手軽に実装するには、
Android2.X系のバグとか色々あってとっても面倒です。
最近はAndroid・iPhoneともにoverflow:auto;だけの指定で大丈夫な模様。
さらにiOSも一本指スクロールに対応し、
両OSとも動作レベルが整っているようです。
そこでスマホの小さな画面を有効活用する時に重宝しそうな、
overflow:auto;を手軽に実装してみました。
1.height値とoverflow:auto;を指定する

height:120px; overflow:auto;

2.iOSでスクロールバーを表示させる。

-webkit-overflow-scrolling:touch;

どこまでスクロールが可能なのかを可視化しましょう。

3.jQueryプラグインなどで全機種対応化させると、
Android4.Xでスクロールが効かないバグがあるという堂々巡りなので、
力技は極力避ける。

4.つまりデフォルトCSSのみで実装可能な範囲までで妥協していくと、
OS側が対応してくれるのを待つのがベスト!じゃないでしょうか。

関連トピック

breakpoint

レスポンシブのブレイクポイントを設定する前に知っておくべきこと

Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営が

Lined

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

font-family

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

css-shadow

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

html

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

公開日:2013/12/14