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