スマートフォンでスクロール中に処理を行う

iOSでスクロール中に何か処理を行おうと思った場合、スクロールイベントはスクロール完了しないと発生しない、スクロール中はsetIntervalが止まるなど、いくつか問題があります。
何かいい方法がないか調べていたところ、参考になる記事を見つけたので試してみました。

サンプルコード

スクロール中ということを判別するために、scroll()だけでなくtouchmove()を使用します。
サンプルとして、上にスクロールしたらページトップが画面下部に表示されるものを作成してみました。

HTML

<div class="pagetop">
	<a href="#page">pagetop</a>
</div>

CSS

.pagetop {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

JavaScript

$(function() {
	$(window).on('scroll', function() {
		scrollDirection();
	});
	$('body').on('touchmove', function() {
		scrollDirection();
	});
});

var newScrollPoint = 0; // 現在のスクロール位置
var scrollPoint = 0; // 現在のスクロール位置との比較用
function scrollDirection() {
	newScrollPoint = $(window).scrollTop(); // 現在のスクロール位置を取得
	// 上にスクロールした時
	if(newScrollPoint < scrollPoint) {
		$('.pagetop').show();
	// 下にスクロールした時
	} else {
		$('.pagetop').hide();
	}
	scrollPoint = $(window).scrollTop(); // 現在のスクロール位置を比較用に上書きしておく
}

上にスクロールしたときにページトップを表示するデモページ

目から鱗というか、touchmove()を使うという方法が意外と思いつかなかったので勉強になりました。
　

【参考サイト】

• JavaScript – CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る – Qiita