e.screenY giving wrong value (mouse coordinates)

Question

I'm having trouble getting the Y mouse coordinates.

function mouseDistance() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(e) {
        document.getElementById("tester").innerHTML = e.screenX + " " + e.screenY;
    }
}

function mainLoop() {
    mouseDistance();
    requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);

e.screenX is working properly, but e.screenY isn't. In the html body, at the top most edge it doesn't get lower than 95px (shouldn't it be 0?).

I do have a 'CSS reset'.

Example: The mouse at the top left corner will be at x: 0; y: 95;

Check out this: https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y — Karlen Kishmiryan, Jun 19 '17 at 06:59
Nope, leave it there, it's OK. I've provided a detailed answer. — Karlen Kishmiryan, Jun 19 '17 at 07:03

Karlen Kishmiryan · Accepted Answer · 2017-06-19T07:27:59.820

The reason is that screenY provides the vertical coordinate (offset) of the mouse pointer in global (screen) coordinates.

The property you probably want to use is the clientY, which returns the vertical coordinate within the application's client area at which the event occurred.

For example, clicking in the top-left corner of the client area will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.

e.screenY giving wrong value (mouse coordinates)

1 Answers1