画面サイズ、イベント発生座標、スクロール量の取得方法

「画面サイズ」や「イベント発生座標」を取得する方法について取り上げます。似たようなプロパティがいくつかあり、目的のプロパティを利用するには、違いを理解しておく必要があります。各プロパティがどういった値を持っているのか実例とともに確認します。

サイズ(幅、高さ)を取得

モニターサイズ ウィンドウサイズ などのサイズを取得するためのプロパティが存在します。

iframeの中なのでイメージがつきづらいですが、CODEPEN上の例を表示します。

プロパティ 概要
screen.width
screen.height
モニターの解像度
screen.availWidth
screen.availHeight
モニターの利用可能な画面サイズ
window.outerWidth
window.outerHeight
ウインドウサイズ
window.innerWidth
window.innerHeight
ウインドウの表示領域のサイズ

イベント発生座標(X, Y)を取得

イベントが発生した座標を取得できるEventプロパティについて確認します。

プロパティ 概要
screenX
screenY
スクリーン上での座標
clientX
clientY
ブラウザ上での座標
pageX
pageY
ページ上での座標(スクロール量が影響)
offsetX
offsetY
要素上での座標

スクロール量を取得

スクロール量を取得できるプロパティについて確認します。

プロパティ 概要
window.scrollX
window.scrollY
スクロール量

スクロールさせるメソッドも存在します。

メソッド 概要
window.scroll(x, y)
window.scrollTo(x, y)
特定の座標までスクロール(絶対的) scrollTo(0, 100)

「x座標=0px」「y座標=100px」にスクロールする。
scrollBy(x, y) 現在の位置から指定量だけスクロール(相対的) scrollBy(0, 100)

現在位置から「右に0px」「下に100px」スクロールする。