☰

screenX/Y、clientX/Y、pageX/Yの違いは何ですか? 質問する

tag-icon • tag-icon javascript ipad safari mouse-position
screenX/Y、clientX/Y、pageX/Yの違いは何ですか? 質問する

screenX/YとclientX/YとpageX/の違いは何ですかY?

また、iPad Safari の場合、計算はデスクトップと同様ですか? それともビューポートが原因で違いがありますか?

例を挙げていただければ幸いです。

ベストアンサー1

pageYとclientYとの違いを説明する図を以下に示しますscreenY。

ページY 対 クライアントY 対 画面Y

pageXおよびclientXおよびについてもそれぞれ同様ですscreenX。

pageX/Y座標は、レンダリングされたページ全体の左上隅（スクロールによって隠れた部分を含む）を基準とします。

一方、clientX/Y座標はブラウザ ウィンドウを通して「見える」ページの表示部分の左上隅を基準とします。

screenX/Y物理的な画面を基準とします。

デモを見る

または、次のスニペットを試してください:

document.addEventListener('DOMContentLoaded', _ => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />  pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});
body {
  border: 1px solid red;
  min-height: 10000px;
  margin: 10px;
}
#info {
  border: 1px solid blue;
  position: fixed;
  top: 80px;
  left: 40px;
}
<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>

注: おそらく必要ないでしょうscreenX/Y

おすすめ記事