[JavaScript] ページのスクロール量を取得する（pageXOffset、pageYOffset）

投稿日：2018年9月28日更新日：2018年9月29日

ページのスクロール量を取得するには、
pageXOffset、pageYOffset を使用します。

サンプルソース

例）ページをクリックすると、スクロール量をアラート表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページスクロール量を取得するサンプル</title>
<script>
function test(){
  //スクロール量を取得する
  var x = window.pageXOffset;  //X方向のスクロール量
  var y = window.pageYOffset;  //Y方向のスクロール量

  alert("スクロール量は、x:" + x + " y:" + y);
}
</script>
</head>
<body style="height:2000px;width:2000px;" onclick="test();">
  <p>スクロールして、ページ上をクリックしてください。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ページスクロール量を取得するサンプル</title>

function test(){

//スクロール量を取得する

var x = window.pageXOffset; //X方向のスクロール量

var y = window.pageYOffset; //Y方向のスクロール量

alert("スクロール量は、x:" + x + " y:" + y);

}

</script>

</head>

<p>スクロールして、ページ上をクリックしてください。</p>

</body>

</html>

解説

X方向のスクロール量はpageXOffset、Y方向のスクロール量はpageYOffsetで取得できます。
取得される値は、px単位です。

執筆者：とら