ウィンドウの現在のスクロール位置を取得
ウィンドウの現在のスクロール位置を取得するには、横(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);