JavaScript

Androidのoverflow:auto/scroll対策

Android2.xでoverflow:scrollやautoが効かない(overflow:hiddenとして処理される)のは有名な話で、困った経験がある方も多いと思います。
調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか?

当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や
他UIと組み合わせた際の相性(イベントが競合しても調整しやすいように)を考えて自前実装で対応する事にしました。

ネイティブで対応済みのバージョンは?

最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。
手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応(Android4.0.4の標準ブラウザ&Chromeで確認)、
iOSはiOS5から一本指でスクロール出来るようになったようです。
※以前は2本指で操作しないとスクロール出来ずわかりにくい仕様でした

ただ、overflow:autoだけを指定した状態だとAndroid・iOSともにコンテンツがオーバーフローしていてもスクロールバーが表示されませんし
Androidは慣性スクロールをするがiOSは慣性スクロールをしないといった具合にOS毎に動作が異なります。

iOSの慣性スクロールに関してはiOS5以降で対応した-webkit-overflow-scrolling:touchを指定する事で慣性スクロールが有効になり
かつスクロールバーも表示されますが、iOS5では子要素がタッチ不能になる症状があるようなので検証した上で導入をおすすめします。
※手元のiOS6.1.2では子要素がタッチ不能になる症状は発生せず、かなり良好です

参考
-webkit-overflow-scrolling: touch;の使いこなし方

JS実装のコンセプト

上記のネイティブ対応の状況から将来的にはネイティブで全ての端末が良好な状態で対応されると思います。
ただし、Androidは完成度が低くAndroid5.xでどれだけ改善されるかわかりませんし、
Google製以外の端末でAndroid5.xが搭載されるのはまだ先の話でしょうから、ユーザー環境は当面Android2.xと4.xが残ると考えています。
以上のことを踏まえて下記としました。

  • jQuery等ライブラリに非依存。
  • スマホ/タブレットをメインに対応(PCはIE9以上とその他モダンブラウザのみサポート)。
  • 必要最小限の機能(いずれはネイティブ移行すると思うので)。
    • ページ内に複数設置可能。
    • Y軸(縦方向)のスクロールのみ対応。
    • コンテンツ領域のリサイズ(横幅/高さ変更)に対応。

デモ

PCは通常通りマウスホイールで、スマホ/タブレットはタッチ操作でスクロール可能です。
また、画面リサイズでスクロールバーを再描画します。

対応(動作確認)ブラウザ
PC:IE9以上とその他モダンブラウザ
スマホ/タブレット:Android2.2以上、iOS5以上
デモページ
スクロールコンテンツデモ

今後の予定

「必要最小限の機能」をコンセプトにしているため2と3は見送る可能性がありますが以下対応を検討中。

  1. iOSでランドスケープ(端末を横向き)にした時にスクロールが重い原因の調査・改善
  2. iOSで-webkit-overflow-scrolling:touchを指定した状態同様に、上下のスクロール終着ポイント以上に
    スクロールしようとした際にバウンドで跳ね返る動きを追加するか検討。
    (非力な端末で動作が重くなることが懸念されるため要検討)
  3. PCでスクロールバーを掴んで(ドラッグして)スクロール出来るよう拡張するか検討。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。

コメント(2)

とおりすがり

デモページを見ようと思ったら、ベーシック認証的なものがでる・・(泣)

管理者

>とおりすがりさん

ご指摘の通りベーシック認証がかかっていたので解除しました(汗)
コメントありがとうございます。