【jQuery】スクロールして要素が入ったかどうか検知するソースコード

スクロールして要素が画面内に入ったら処理って記述を意外と使うので備忘録

スクロールして要素が画面内に入ってるときは検知し続けるソースコード

jQuery(function($){
	const windowHeight = $(window).height();// ウィンドウサイズを取得
	$(document).scroll(function() {
	    $("検知したい要素").each(function(){
			const targetArea = $(this);
			const targetAreaStart = targetArea.offset().top;// 要素の座標取得
			const targetRange = targetAreaStart + targetArea.innerHeight();// 要素の終わりの座標取得
			const currentPos = $(window).scrollTop();//現在位置の座標取得
			if(currentPos >= targetAreaStart && currentPos <= targetRange ){// 画面内の処理
				console.log("画面内に入ってるよ");
			}else{// 画面外の処理

			}
		});
	});
});

これで検知したい要素が画面内に入って画面外にでるまで発火し続ける

動作は確認してないけど過去の備忘録のソースコードをほぼつかってるからそっちにデモがある

ただ、この書き方だと要素が画面内に居続けると発火し続けるので一度だけ発火させたいときはclassで制御する方法があるね

$("範囲要素:not(.is-fire)").each(function(){// 書き換え
	…
	if(currentPos >= targetAreaStart && currentPos <= targetRange){// 画面内の処理
		console.log("画面内に入ってるよ");
		targetArea.addClass( "is-fire" );// 追加
		// 一度だけ行いたい処理をここに書く
	}else{// 画面外の処理
	}
});

これで画面内に入ったら一度だけ発火させることができる
動作の確認はしてない