web関連

【jQuery】(上/下)どっちにスクロールしているか判別

上下どっちにスクロールをするのかを実装した際にいろいろと失敗したのでメモ書き

上スクロールか下スクロールか判別するソースコード

var pos = 0;
var currentPos = 0;
$(window).on('scroll', function(){
	scroll();
});
function scroll() {
	currentPos = $(window).scrollTop();
	console.log("現在地:"+currentPos+", 移動前:"+pos);
	if( currentPos <= pos ){
		console.log("上にスクロール中");
	}else{
		console.log("下ににスクロール中");
	}
	pos = currentPos;//現在地保存
}
$(window).trigger('scroll');// 上にスクロール中

失敗1:「currentPos」と「pos」が同じ数値になるときがある

currentPos < posと書いたらposとcurrentPosが同じ数値になる時があり挙動がおかしくなった
たぶん、読み込む物が多かったせい

注意1:trigger(‘scroll’)でスクロールイベント発火

$(window).trigger('scroll');で読み込まれた瞬間にスクロールイベントを発火できる

ページの途中で再リロードした場合は以下のようになる

現在地:0, 移動前:0
上にスクロール中
現在地:12738.5, 移動前:0
下ににスクロール中

1回目が$(window).trigger('scroll');でリロードした際の移動が2回目

注意2:スマホのスクロール対策

理由は忘れたがtouchmoveを使うことでスマホのタッチしているときもスクロールイベントを取得できるうんぬんあった気がするのでメモ

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

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA