JavaScript MouseEvent screenY Property

What You’ll Learn

MouseEvent.screenY is a read-only number: the mouse’s vertical position relative to the screen (monitor), not the page or the viewport. Learn how it differs from clientY and pageY, and practice with five try-it labs.

Introduction

Sometimes you care about where the pointer sits on the physical display—not where it is inside the scrolled page or the browser chrome. That is screenX (horizontal) and screenY (vertical): coordinates in screen space.

document.addEventListener("mousemove", (event) => {
  console.log(event.screenY); // pixels from screen top
});

Understanding the Property

MDN: screenY provides the vertical coordinate (offset) of the mouse pointer in screen coordinates. Pair it with screenX for a full screen point.

• Instance — read event.screenY in a handler.
• Number — CSS pixels; a floating-point double.
• Screen-relative — independent of page scroll.
• Read-only — set via constructor options on synthetic events only.

📝 Syntax

const y = mouseEvent.screenY;

Value

A double floating-point value in pixels (MDN). Early versions of the specification defined this as an integer; modern engines expose a double for subpixel precision.

⚖️ screenY vs Other Y Coordinates

Mental model: use screenY for display-relative work, clientY for viewport UI, and pageY for document markers. Pair screenY with screenX for a full screen point.

Examples Gallery

Examples follow MDN MouseEvent.screenY. Move the mouse and (if you can) drag the browser window vertically to see screen vs viewport values.

const screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
    Screen X/Y: ${e.screenX}, ${e.screenY}
    Client X/Y: ${e.clientX}, ${e.clientY}`;
}

Screen X/Y: 842, 410
Client X/Y: 180, 96

document.addEventListener("click", (e) => {
  const point = { x: e.screenX, y: e.screenY };
  console.log(point);
});

{ x: 910, y: 420 }

const event = new MouseEvent("click", {
  screenX: 640,
  screenY: 360,
  bubbles: true
});

console.log(event.screenX); // 640
console.log(event.screenY); // 360

640
360

document.addEventListener("mousemove", (e) => {
  console.log({
    screenY: e.screenY, // monitor
    clientY: e.clientY, // viewport
    pageY: e.pageY,     // document
    scrollY: window.scrollY
  });
});

{
  screenY: 480,
  clientY: 120,
  pageY: 120,
  scrollY: 0
}

document.addEventListener("mousemove", (e) => {
  // Approximate: how far the viewport is from the screen's top
  const approxWindowTop = e.screenY - e.clientY;
  console.log(approxWindowTop);
});

360

🚀 Common Use Cases

• Debugging pointer position relative to the physical display.
• Teaching screen vs viewport vs document coordinate systems.
• Building a full screen point with screenX + screenY.
• Synthetic events in tests with known screenX / screenY.
• Understanding how window chrome offsets relate to screen space.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Value type is a floating-point double in modern engines.
• Page scroll does not change screenY; window position on the monitor does.
• Related: screenX, clientY, pageY, MouseEvent(), Window, JavaScript hub.

💡 Best Practices