ページのスクロール量を含めたマウスポインタの座標を取得する - JavaScript

JavaScriptでページのスクロール量を含めたマウスポインタの座標を取得するコードを紹介します。

概要

こちらの記事で紹介した、マウスポインタの座標値を取得するコードを紹介しました。マウスポインタの座標値を取得できますが、ページがスクロールする場合は、ページのスクロール量を考慮しないため、画面上の座標を返します。利用用途によっては、ページのスクロール量を考慮した座標値が欲しい場合があります。
この記事では、ページのスクロール量を考慮したマウスポインタの座標値を取得するコードを紹介します。

書式

ページのスクロール量を考慮したマウスポインタの座標値を取得する場合は、pageX, pageY プロパティを利用します。

ページX座標

(マウスイベントオブジェクト).pageX

ページY座標

(マウスイベントオブジェクト).pageY

例:縦方向

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .InfoFrame {
      position:fixed;
      left:2rem;
      top:2rem;
      border:1px solid #1e2793;
    }
    #Frame1 {
      height:8rem;
      background-color:#ffa4a4;
    }
    #Frame2 {
      height: 8rem;
      background-color: #ffda73;
    }
    #Frame3 {
      height: 8rem;
      background-color: #ceff7d;
    }
    #Frame4 {
      height: 8rem;
      background-color: #7aff8d;
    }
    #Frame5 {
      height: 8rem;
      background-color: #86ffd6;
    }
    #Frame6 {
      height: 8rem;
      background-color: #9dbaff;
    }
    #Frame7 {
      height: 8rem;
      background-color: #e897ff;
    }
    #Frame8 {
      height: 8rem;
      background-color: #ffa4c8;
    }
  </style>
  <script type="text/javascript">
    function init() {
      window.onmousemove = handleMouseMove;
      function handleMouseMove(event) {
        event = event || window.event; // IE対応
        target = document.getElementById("output_page");
        target.innerHTML = "Page X:" + event.pageX + ", Page Y:" + event.pageY;

        target = document.getElementById("output_client");
        target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;

        target = document.getElementById("output_screen");
        target.innerHTML = "Screen X:" + event.screenX + ", Screen Y:" + event.screenY;
      }
    }
  </script>
</head>
<body>
  <body onload="init();">
    <div class="InfoFrame">
      <div id="output_page"></div>
      <div id="output_client"></div>
      <div id="output_screen"></div>
    </div>
    <div id="Frame1"></div>
    <div id="Frame2"></div>
    <div id="Frame3"></div>
    <div id="Frame4"></div>
    <div id="Frame5"></div>
    <div id="Frame6"></div>
    <div id="Frame7"></div>
    <div id="Frame8"></div>
  </body>
</body>
</html>

解説

こちらの記事で紹介した、マウスポインタの座標値を取得するコードと同様です。

handleMouseMove 関数に以下のコードを追加して、pageX, pageY の値を画面に表示しています。

   target = document.getElementById("output_page");
   target.innerHTML = "Page X:" + event.pageX + ", Page Y:" + event.pageY;

実行結果

上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。

マウスポインタをページ内に移動させると、座標値が左上に表示されます。

マウスポインタを左上に移動します。PageX, PageY, ClientX, ClientYの値が0になります。

ページを下にスクロールします。

ページを下にスクロールした状態で、マウスポインタをページの左上に移動します。 ClientX, ClientYの値は両方とも 0になりスクロールを考慮しない、Webブラウザの画面上の座標を表しています。一方、PageYの値はスクロール量を考慮した値になっています。

例:横方向

横方向のスクロールの動作を確認します。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .InfoFrame {
      position:fixed;
      left:2rem;
      top:2rem;
      border:1px solid #1e2793;
    }
    #Frame1 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #ffa4a4, #ff3131);
    }
    #Frame2 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #ffda73, #e5b01c);
    }
    #Frame3 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #ceff7d, #90cf28);
    }
    #Frame4 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #7aff8d, #1cb532);
    }
    #Frame5 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #73fbff, #19b7bb);
    }
    #Frame6 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #9dbaff, #2052ca);
    }
    #Frame7 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #e897ff, #a625cb);
    }
    #Frame8 {
      width: 2480px;
      height: 8rem;
      background: linear-gradient(to right, #ffa4c8, #e0377a);
    }
  </style>
  <script type="text/javascript">
    function init() {
      window.onmousemove = handleMouseMove;
      function handleMouseMove(event) {
        event = event || window.event; // IE対応
        target = document.getElementById("output_page");
        target.innerHTML = "Page X:" + event.pageX + ", Page Y:" + event.pageY;

        target = document.getElementById("output_client");
        target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;

        target = document.getElementById("output_screen");
        target.innerHTML = "Screen X:" + event.screenX + ", Screen Y:" + event.screenY;
      }
    }
  </script>
</head>
<body>
  <body onload="init();">
    <div class="InfoFrame">
      <div id="output_page"></div>
      <div id="output_client"></div>
      <div id="output_screen"></div>
    </div>
    <div id="Frame1"></div>
    <div id="Frame2"></div>
    <div id="Frame3"></div>
    <div id="Frame4"></div>
    <div id="Frame5"></div>
    <div id="Frame6"></div>
    <div id="Frame7"></div>
    <div id="Frame8"></div>
  </body>
</body>
</html>