event.pageY property
The event.pageY property contains
the coordinates of the mouse cursor along
the Y axis. To determine the coordinates,
there are also
event.clientX,
event.clientY,
event.pageX
properties. Let's see the difference between
clientX/clientY⁅/c ⁆
and .
pageX/pageY
How clientX and clientY work: if
you have a 1000 by 1000 pixels
window and the mouse is in the center, then
clientX and clientY will both
be equal to 500. If you then scroll
the page horizontally or vertically without
moving the cursor, the values clientX
and clientY will not change because
they are relative to the window, not the document.
How pageX and pageY work: if you
have a 1000 by 1000 pixels window
and the cursor is in the center, then pageX and
pageY will be equal to 500. If you
then scroll the page 250 pixels down, then
pageY becomes 750. Thus pageX
and pageY contain the coordinates of
the event, taking scrolling into account.
Syntax
event.pageY;
Example
When moving the mouse on the page,
we will display its coordinates
relative to the browser window
(pageX and pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
