FrogApps 技術ブログ始めました！
RailsやiOS、HTML5の情報を発信中!! → http://qiita.com/teams/frogapps
iOS 6のSafari/WebViewはChromeやOSX版Safariと少しずつ違う動きをして、モバイル版WebやWebAppを作るときに頭を悩ませます。
先週、ミイルの中で使うHTML/Javascriptを書いている時に、iOS6でたまにsetTimeout/IntervalやWebWorkerからのmessageが届かない事に気がつきました。
ググってみると、iOS6のMobileSafariでは画面がスクロールしているときに上記の様なイベントが発行されないようなのです。jQuery本家のBBSでも打つ手無し的な事が書かれていました。
これではsetIntervalで500ms毎にスクロール位置を検出して何かしたくても、検出する方法がありません。
Safariのスクロール機能を使わずにタッチイベントとTrasform3Dを駆使してiOSのスクロールをエミュレートする、iScroll 4を使うことで、この問題を解決することができます。
iScrollは元々CSSのoverflow:scrollをエミュレートするために作られたライブラリですが、MobileSafariが同機能をサポートした今は、高度なスクロールのカスタマイズやPull to Refreshの処理を行うためのライブラリとして提供されています。
使い方は簡単でただscriptタグで読み込むだけです。
iOS 6でタイマーイベントが’使えるようになるほかに、WebViewでHTMLの端まで引っ張ったときに、バウンス部分の影が見えて格好が悪いことがあります。しかし、このライブラリを使うことで見えなくすることが可能です。
MobileSafariのスクロール処理で困った方は、iScroll4を試してみてください。