ウインドウの座標を得る

概要

ウインドウのスクロール座標を ScreenView インターフェースおよび Element インターフェースから得ます。(Google Chrome 8, Firefox 3.6.13, Opera v10.63)

IE8- は window.pageXOffset が存在せず、不思議なことに element.scrollLeft からウインドウのスクロール座標を得ることが出来ます。
ただし、DOCTYPEスイッチによって座標を取得するための要素ノードが変化します。

(※element.scrollLeft は本来、overflow と組み合わせるためにあります。ウインドウのスクロール座標を得るなら可能な限り window.scrollX を使った方がベターだと思います。)

CSSOM-View (interface ScreenView)

ScreenView#pageXOffset
ウインドウの横スクロール座標 (px)
ScreenView#pageYOffset
ウインドウの縦スクロール座標 (px)
ScreenView#scrollX
ウインドウの横スクロール座標。pageXOffset のエイリアス。
ScreenView#scrollY
ウインドウの縦スクロール座標。pageYOffset のエイリアス。

CSSOM-View (interface Element)

Element#scrollLeft
要素の横スクロール座標 (px)。本来は overflow と組み合わせて使う。
Element#scrollTop
要素の縦スクロール座標 (px)。本来は overflow と組み合わせて使う。

Mozilla独自拡張

window.scrollMaxX
ウインドウの横スクロール座標 最大値 (px)
window.scrollMaxY
ウインドウの縦スクロール座標 最大値 (px)

サンプル CSSOM-View (interface ScreenView)

window.screen:

window.innerWidth:

window.innerHeight:

window.pageXOffset:

window.pageYOffset:

window.scrollX:

window.scrollY:

window.screenX:

window.screenY:

window.outerWidth:

window.innerHeight:

サンプル CSSOM-View (interface Element)

document.documentElement.scrollTop:

document.documentElement.scrollLeft:

document.documentElement.scrollWidth:

document.documentElement.scrollHeight:

document.documentElement.clientTop:

document.documentElement.clientLeft:

document.documentElement.clientWidth:

document.documentElement.clientHeight:

document.body.scrollTop:

document.body.scrollLeft:

document.body.scrollWidth:

document.body.scrollHeight:

document.body.clientTop:

document.body.clientLeft:

document.body.clientWidth:

document.body.clientHeight:

サンプル (Mozilla独自拡張)

window.scrollMaxX:

window.scrollMaxY:

参考URL

CSSOM-View (interface ScreenView)
CSSOM-View (interface Element)
DOM Level 2
その他