Androidでtouchmoveがうまくうごかない件とflipsnapでの対応策

この件。主に2.1とかっぽい。
http://www.youtube.com/watch?v=s6c3n7IjKuY

手元の端末だとIS03で同じ現象だった。エミュレーターでも同じ挙動になったので端末依存じゃないかも。

んで検証してみたらtouchstartをpreventDefault()すればうまく動くことがわかった。
http://dl.dropbox.com/u/336104/demo/touch/touchmove.html

この例だと上二つはうまく動くけど下二つは動画みたいになる。つまりtouchstartをpreventDefaultすれば問題解決なんだけど、touchstartをpreventDefaultすると、ネイティブのスクロールが効かなくなる。

これで何が困るか。flipsnapはtouchmoveで横と縦どっちに動いたかを判定して、ネイティブのスクロールを止めるかどうかを判定してる。こうすることで、横にスワイプしたときはネイティブのスクロールをとめて要素がスライドする、縦に動かしたときはflipsnapの動きをとめてネイティブのスクロールを有効にする、という動作になってる。つまりtouchstartでpreventDefaultしちゃうとネイティブのスクロールのコントロールできなくて困る。

対応策としては3つ。

何もしない

特に何も対応しない。touchmoveがtouchendまで起きないだけなので指を離したときに動くのは動く。ただ指についてくるような動作にならないだけ。個人的にはこれでいいと思う。同じような挙動のGoogle画像検索もこうなってた。

touchstartをpreventDefaultする

flipsnap側では対応しないけど、flipsnapじゃないところでtouchstartをpreventDefaultしとけばOK。（対象端末の判定は適当にやってね）

if (ua.android21) {
  $('.flipsnap').bind('touchstart', function(e) { e.preventDefault() });
}

ただしflipsnapの部分はネイティブスクロールが効かなくなる。クライアントにネイティブのスクロールはいらないからどうしても他の端末と同じにしたいんだよねー。とか言われたときに力を発揮。

ボタン的なのをつくる

こんな感じでボタンつけてあげる。
http://pxgrid.github.com/js-flipsnap/demo.html#demo-nextprev

中途半端に動くのがイヤならタッチの動作を切るのもあり。
http://pxgrid.github.com/js-flipsnap/demo.html#demo-touchDisable