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

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()を使うという方法が意外と思いつかなかったので勉強になりました。
 

【参考サイト】

 

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

関連記事

コメントを残す

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

CAPTCHA


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

2024年7月
 123456
78910111213
14151617181920
21222324252627
28293031