event.pageY プロパティ
プロパティ event.pageY は、
Y軸におけるマウスカーソルの座標を保持します。
座標を決定するためのプロパティには、
event.clientX、
event.clientY、
event.pageX もあります。
clientX/clientY と
pageX/pageY の違いを見てみましょう。
clientX と clientY の仕組み：
もし 1000 × 1000 ピクセルのウィンドウがあり、
マウスが中央にある場合、clientX と clientY は
両方とも 500 になります。その後、
カーソルを動かさずにページを水平または垂直に
スクロールしても、値は変わりません。これらはドキュメントではなく
ウィンドウに対して相対的に測定されるためです。
pageX と pageY の仕組み：
もし 1000 × 1000 ピクセルのウィンドウがあり、
カーソルが中央にある場合、
pageX と pageY は 500 になります。
その後、ページを 250 ピクセル下にスクロールすると、
pageY は 750 になります。
このように、pageX と pageY はスクロールを考慮した
イベントの座標を保持します。
構文
event.pageY;
例
ページ上でマウスを移動する際に、
ブラウザウィンドウに対する座標
(pageX と pageY) を表示します：
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
