event.clientY property
The event.clientY property contains
the coordinates of the mouse cursor along
the Y axis. To determine the coordinates,
there are also
event.clientX,
event.pageX,
event.pageY
properties. Let's see the difference
between clientX/clientY 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 into account scrolling.
Syntax
event.clientY;
Example
When moving the mouse on the page, we
will display its coordinates relative
to the browser window
(clientX and clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
