スクロールの位置を取得する方法

スクロール位置によって何らかの処理を行いたいときのために、
スクロールの位置(画面上部、下部、中央)を取得するサンプルをメモ。
サンプルはjQueryを使用します。

スクロールの位置を取得する方法のデモページ

サンプルコード

$(function() {
	function scrollPoint() {
		var windowHeight = $(window).height(),
		windowScrolltop = $(window).scrollTop(),
		scrollBottom = windowHeight + windowScrolltop,
		scrollMiddle = windowHeight / 2 + windowScrolltop;

		$('#height span').text(windowHeight);
		$('#top span').text(windowScrolltop);
		$('#middle span').text(scrollMiddle)
		$('#bottom span').text(scrollBottom)
	}

	$(window).on('load resize scroll', function() {
		scrollPoint();
	});
});

$(window).height()で画面の高さ(windowHeight)を、
$(window).scrollTop()で画面上部のスクロール位置(windowScrolltop)を取得。

画面下部のスクロール位置(scrollBottom)はwindowScrolltopとwindowHeightを足したもの、
画面中央(scrollMiddle)はwindowScrolltopとwindowHeightの半分(中央)を足したものになります。

この処理をページ読み込み時、画面サイズ変更時、スクロール時に実行するようにしています。

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

関連記事

コメントを残す

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

CAPTCHA


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

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930