ページの下までスクロールしたときに何らかの処理を実行する例

Tweet

Category JavaScript / Tagged jQuery 2012/03/08

ページの下までスクロールしたときに何らかの処理を実行する例

$(window).bind("scroll", function() {
	scrollHeight = $(document).height();
	scrollPosition = $(window).height() + $(window).scrollTop();
	if ( (scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
		//スクロールの位置が下部5%の範囲に来た場合
	} else {
		//それ以外のスクロールの位置の場合
	}
});

demo ページをある程度下までスクロールしたときに何らかの処理を実行する – デモ

「本当にぴったり最下部までスクロールしたら」という条件にすることも可能ですが、ある程度範囲を持たせておいた方がよいことが多いでしょう。

条件は以下のようなものに変更可能です。

・上の例のように割り算で、「下の5%の範囲に入ったら」
・「何%ぐらい読み進めたタイミングで」
・引き算で「下の何pxの範囲に入ったら」

参考

汎用的なプラグインで対応したい場合は、こちらもよいでしょう。

https://github.com/jimyi/jquery_bottom