ウィンドウの現在のスクロール位置を取得

ウィンドウの現在のスクロール位置を取得するには、横(X軸)はwindow.scrollXプロパティ、縦(Y軸)はwindow.screenYプロパティを使用します。
ウィンドウの位置は、デスクトップの左上を0とした距離です。
また、IE8以下は対応しておらず、代わりにIE7~IE8では横(X軸)はdocument.documentElement.scrollLeftプロパティ、縦(Y軸)はdocument.documentElement.scrollTopプロパティ、IE6以下では横(X軸)はdocument.body.scrollLeftプロパティ、縦(Y軸)はdocument.body.scrollTopプロパティを使用します。

構文

X軸

var x = window.scrollX;

X軸:IE7~IE8

var x = document.documentElement.scrollLeft;

X軸:IE6以下

var x = document.body.scrollLeft;

Y軸

var y = window.scrollY;

Y軸:IE7~IE8

var y = document.documentElement.scrollTop;

Y軸:IE6以下

var y = document.body.scrollTop;

戻り値:window.scrollX/document.documentElement.scrollLeft/document.body.scrollLeft

ウィンドウのスクロールのX軸の位置(座標)の値を返します。

戻り値:window.scrollY/document.documentElement.scrollTop/document.body.scrollTop

ウィンドウのスクロールのY軸の位置(座標)の値を返します。

次のようにすることで、window.scrollX/scrollYとdocument.documentElement.scrollLeft/scrollTop、document.body.scrollLeft/scrollTopの分岐を省くことができます。

サンプルコード

JavaScript

/**
 * ウィンドウの現在のスクロール位置を取得
 * @return {{x:number,y:number}} 取得したXとY軸の値を返す
 */
var getWindowScrollPosition = function() {
	return {
		x : typeof window.scrollX !== 'undefined' ? window.scrollX : (typeof document.documentElement.scrollLeft !== "undefined" ? document.documentElement.scrollLeft : document.body.scrollLeft),
		y : typeof window.scrollY !== 'undefined' ? window.scrollY : (typeof document.documentElement.scrollTop  !== "undefined" ? document.documentElement.scrollTop  : document.body.scrollTop)
	};
};

var pos = getWindowScrollPosition();

alert(pos.x);

JavaScript逆引きリファレンス一覧へ戻る