Here’s a picture explaining the difference between pageY and clientY.
Same for pageX and clientX, respectively.
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
while clientX/Y coordinates are relative to the top left corner of the visible part of the page, “seen” through browser window.
See Demo
or try this snippet:
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>Note: You’ll probably never need screenX/Y