座標

座標

pixcel 単位
X座標は右に進み、Y座標は下に進む

原点

　ドキュメント座標

ドキュメントの左上

　ビューポート座標

表示領域の左上

ドキュメント座標とビューポート座標

ビューポートの原点 = ドキュメントの原点 + スクロール量

ビューポート座標 = ドキュメント座標 - スクロール量

ドキュメント座標 = ビューポート座標 + スクロール量

ドキュメントのサイズ

　幅

コンテンツ + パティング

document.documentElement.scrollWidth

ボーダーやスクロールバーを含む （小数精度）

document.body.getBoundingClientRect().width

　高さ

コンテンツ + パティング

document.documentElement.scrollHeight

ボーダーやスクロールバーを含む （小数精度）

document.body.getBoundingClientRect().height

ビューポートのサイズ

　幅

コンテンツ + パティング

document.documentElement.clientWidth

ボーダーやスクロールバーを含む

window.innerWidth

　高さ

コンテンツ + パティング

document.documentElement.clientHeight

ボーダーやスクロールバーを含む

window.innerHeight

スクロール量

X

window.scrollX
window.pageXOffset

Y

window.scrollY 
window.pageYOffset