iOSでWebページを表示した時にscrollイベントが連続的に発生しない
ブラウザでスクロールした際に要素の位置や色をスクロール量に合わせて変更するような処理を行おうとしたところ、JavaScript(jQuery)でscrollイベントでちょっとつまずいたのでメモ。
ちなみにjQueryのバージョンは2.1.1。
scrollイベントを使ってスクロール中に連続的な処理を行う場合、PCやAndroid端末上では期待通りの動作をするが、iOSで閲覧した場合に期待通りに動作しない問題が発生。(自分の場合はiOSのChromeで発生したけど、Safariでは問題なかった・・・)
var $win = $(window);
$win.scroll(function () {
//スクロール量を取得して要素の色を変えたりするよ
});
AndroidとiOSでは、イベントの発生タイミングが異なる
この記事によると、以下の違いがある事が分かった。
iOSでは、スクロールが完了したタイミングで1回だけイベントが発生します。スクロールを行っている間は、イベントは発生しません。
Androidでは、スクロールしている間、連続的にイベントが発生します。このイベント発生タイミングは、PCブラウザと同じです。
タッチデバイスの場合はtouchmoveイベントを使う
という事でタッチデバイスでスクロールした際に連続的に処理を行いたい場合は、touchmoveイベントを使用する。
var $win = $(window);
$win.scroll(function () {
//スクロール量を取得して要素の色を変えたりするよ
});
if('ontouchstart' in window) {
$win.bind('touchmove', function () {
//スクロール量を取得して要素の色を変えたりするよ
});
}
ただ、scrollイベントとtouchmoveイベントを併用するとtouchmoveイベント発生時にscrollイベントも同時に発生してしまうため、場合によってはtouchmoveイベント登録後にscrollイベントをunbindした方がいいかも。
もし、もっと良い方法を知っている方いたらぜひ教えてください。