iOSでスクロールイベントを取得する

iOSでスクロールに合わせて処理を行おうと思った場合、スクロールイベントがスクロール完了しないと発生しない問題があります。
iScrollを使って疑似的に実装する方法がありますが、色々と別の問題が発生することがあるのであまり使いたくはありません。
何か他に方法が無いか調べてみたところ、参考になりそうな記事を見つけたので試してみました。

サンプルコード

ページの一部でならJavaScriptが動作するらしいので、まずは参考サイトの説明を見ながら、スクロール中にスクロール位置を取得するサンプルを作成してみました。

HTML

<div id="scrollTop"></div>
<div id="wrapper">
	<div id="contents">
		コンテンツ内容
	</div>
</div>

CSS

#scrollTop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
#wrapper {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

JavaScript

$(function() {
	$('#wrapper').on('scroll', function() {
		$('#scrollTop').text($('#wrapper').scrollTop());
	});
});

iOSでスクロールイベントを取得するデモページ1
これで問題ないかと思ったのですが、iOS6で確認したところスクロール完了時しか取得できていませんでした。
 

色々試してみたところ、スクロールを滑らかにする-webkit-overflow-scrolling: touch;を外すとスクロール中でも値を取得できるようになりました。

CSS

#scrollTop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
#wrapper {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}

iOSでスクロールイベントを取得するデモページ2
ただ、スクロールのスムーズさが無くなってしまうので、実際に使えるかどうかは微妙なところかもしれません。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31