JavaScript MouseEvent movementY Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word MOVEMENTY

Definition

MouseEvent.movementY is a read-only number: how far the pointer moved vertically since the previous move event of the same type. Think current.screenY − previous.screenY.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.movementY. Start with this line.

JavaScript
event.movementY
CallWhat it does
event.movementYPrimary signature.

Built into the browser. Read event.movementY on a MouseEvent — no import required.

Library declarations
JavaScript
event.movementY

Parameters

ParameterDescription
Move eventRequired. mousemove, pointermove, or pointerrawupdate
DIY previous YOptional. Safer when pixel units must match

Return Value

Return ValueDescription
*The current value of event.movementY.

JavaScript Examples

Example 1 — Log movementX / movementY

MDN-style demo: print the delta while you move the mouse.

JavaScript
const log = document.getElementById("log");

document.addEventListener("mousemove", (event) => {
  log.textContent =
    `movement: ${event.movementX}, ${event.movementY}`;
});
Try It Yourself

How It Works

  1. Find the log node. getElementById("log") is where the text will appear.
  2. Listen for moves. Each mousemove delivers a fresh MouseEvent.
  3. Read both axes. movementY is vertical; movementX is horizontal.
  4. Update the UI. The template string replaces the log with the latest delta.

Example 2 — Zero on Non-Move Events

A plain click still has absolute coordinates, but movementY is 0.

JavaScript
document.addEventListener("click", (e) => {
  console.log({
    type: e.type,
    movementY: e.movementY, // 0
    clientY: e.clientY      // absolute position still set
  });
});
Try It Yourself

How It Works

  1. Listen for click. Clicks are mouse events, but not move events.
  2. Check the delta. MDN: movementY is always 0 here.
  3. Check absolute Y. clientY still reports where you clicked.
  4. Rule of thumb. Need deltas? Use mousemove / pointermove, not click.

Example 3 — DIY Delta from screenY

MDN tip: compute your own delta when pixel units must stay consistent.

JavaScript
let prev = null;

document.addEventListener("mousemove", (e) => {
  const diyDy = prev == null ? 0 : e.screenY - prev;
  prev = e.screenY;

  console.log({
    movementY: e.movementY,
    diyDy
  });
});
Try It Yourself

How It Works

  1. Keep the last Y. prev stores the previous screenY.
  2. First sample. When prev is null, treat the DIY delta as 0.
  3. Later samples. Subtract previous from current screenY to get diyDy.
  4. Compare. Log both the browser’s movementY and your DIY value — they are often close, but units can differ.
Compatibility

Browser Support

MouseEvent.movementY is Baseline Newly available (MDN: since January 2026). It is not Deprecated, Experimental, or Non-standard — but older browsers may need a DIY screenY fallback.

✓ Baseline · Newly available

MouseEvent.movementY

Vertical pointer delta between consecutive move events — useful for pans, look controls, and relative input.

Modern Newly available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
movementY Good

Bottom line: Safe for modern evergreen browsers. For portable unit math, prefer successive screenY / clientY deltas as MDN recommends.

Frequently Asked Questions

It is a read-only number: the vertical difference of the pointer between this move event and the previous move event of the same type. Conceptually: current.screenY − previous.screenY.
No. MDN marks MouseEvent.movementY as Baseline Newly available (since January 2026). It is not Deprecated, Experimental, or Non-standard. Older browsers may still need a DIY screenY fallback.
It is always zero on MouseEvent types other than mousemove, and on PointerEvent types other than pointermove or pointerrawupdate. A plain click reports 0 even though clientY may still update.
Browsers disagree on whether movementY uses physical pixels, logical pixels, or CSS pixels. For portable deltas, many apps compute their own delta from successive screenY or clientY values.
movementX is the horizontal counterpart. Together they describe how far the pointer moved since the last move event of the same type.
Pointer-lock look controls, vertical pans, drawing tools, and any UI that needs relative vertical movement rather than absolute cursor position.

Next: MouseEvent.mozInputSource

Learn the non-standard property that reports which device produced a mouse event.

mozInputSource tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript MouseEvent movementX Property JavaScript MouseEvent mozInputSource Property