スマートフォンのブラウザでoverflow:scrollでスクロールさせようとした話。

web


スマートフォンのブラウザで、Google Mapみたいな感じにdivの中に入れたでっかいcanvasをグリグリスクロールさせたいと思って調べてみてわかったことのメモです。

※結論から言うと自分のやりたいことは出来ていないので、解決策を知りたい人には役に立ちません。

サンプルの説明

こんな感じで320×320のdivの中500×500のcanvasを入れてみます。わかりやすいようにoverflow:autoではなく、scrollで指定しています。

<div style="width:300px;height:320;overflow:scroll;border:solid 1px gray"> 
<canvas width="500" height="500"></canvas>

まずPCブラウザ(Chrome)

  • まぁ当然スクロールバーが表示されます。(注:画像です)

iOSのブラウザ

  • スクロールバーが表示されません！

  • で指でスクロールさせても動かないので、どうしたものかなぁと思っていてちょっと調べたところ、なんと二本指でスクロールさせるとdivの中のcanvas要素を動かすことが出来ました。わかりにくい！

Androidのブラウザ

  • iOSと同じようにスクロールバーが表示されません。

  • じゃあiOSと同じように二本指でやればいいんでしょと思ったらそれでも動きません。。
調べてみた
  • するとこのissueが見つかりました。これはAndroidのdeveloper siteでナビの部分にoverflow:autoを使っているところがあるので、Androidのブラウザではスクロールさせることが出来ず見られないというものです。issueの中には早くどうにかしてくれという切実な願いが書かれていますね。
  • 二年以上に渡って継続しているissueなので、途中読み飛ばしてざっくりとしか見ていませんが、どうやらAndroidではスクロール出来ないようで、overflow:autoã‚„scrollを指定してもoverfloat:hiddenとして処理されてしまうっぽいです。

考えたこと

  • スマートフォン向けのウェブアプリで、ドラッグしてある要素の中にある小要素をスクロールさせようとすると、touchstart, touchmove, touchendなどのイベントを取得して、scrollLeft(Top)などに入れて動かす方法になるんですかね。
  • issueにはこのライブラリ使って、スクロールバーのところをタッチすればスクロールするとありますが、要素の中をドラッグして動かしたいんですよね。。
  • あとはAndroidのFireFoxだと動くみたいなことが書かれていますね。試せていないですが。
  • そもそも別の方法がありそうな気もするし、スマートフォンだと画面のスクロールとドラッグが同じ操作になるため画面のスクロールを妨害するので、やはりiOSでの二本指でのスクロールやスワイプのような別の方法に割り当てるべきなのか。。何にせよわかりにくですね。。
  • なんかすでにライブラリがありそうだし、すべきなところかなと思うのですが、あまり需要がないのかな？
    • (追記)ありました。
jQuery.flickable
  • http://lagoscript.org/jquery/flickable
  • このデモを見るとAndroidでもスムーズに動かすこと出来そうです。素晴らしい！
  • ソース読んで勉強しよう。。
  • UIちゃんと勉強しないとなぁと改めて感じました。