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();
});