JavaScript MouseEvent offsetY Property

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

Definition

MouseEvent.offsetY is a read-only number: how far the pointer is vertically from the padding edge of the event’s target element (CSS pixels).

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

Syntax

Use event.offsetY. Start with this line.

JavaScript
event.offsetY
CallWhat it does
event.offsetYPrimary signature.

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

Library declarations
JavaScript
event.offsetY

Parameters

ParameterDescription
Target elementRequired. Padding box that defines the origin
Element heightOptional. Needed to convert to percentages

Return Value

Return ValueDescription
*The current value of event.offsetY.

JavaScript Examples

Example 1 — Log offsetY on Click

Read the local Y whenever the user clicks the target element.

JavaScript
const box = document.querySelector("#box");
const log = document.querySelector("#log");

box.addEventListener("click", (e) => {
  log.textContent = `offsetY: ${e.offsetY}`;
});
Try It Yourself

How It Works

  1. Select the target. The listener is on #box, so the coordinate space is that element.
  2. Listen for click. Each click delivers a MouseEvent.
  3. Read offsetY. The value is CSS pixels from the top padding edge.
  4. Show the result. Write the number into the log for quick feedback.

Example 2 — offsetY vs clientY vs pageY

See local, viewport, and document Y on the same click.

JavaScript
box.addEventListener("click", (e) => {
  console.log({
    offsetY: e.offsetY, // element padding edge
    clientY: e.clientY, // viewport
    pageY: e.pageY      // document (+ scroll)
  });
});
Try It Yourself

How It Works

  1. One event, three origins. The same click exposes three different Y values.
  2. Local first. offsetY answers “how far down inside this element?”
  3. Viewport next. clientY answers “where in the visible window?”
  4. Document last. pageY includes vertical scroll — useful for page-wide layouts.

Example 3 — Click Position as a Percentage

Normalize local Y for vertical sliders, scrubbers, or image maps.

JavaScript
track.addEventListener("click", (e) => {
  const height = track.clientHeight || 1;
  const percent = Math.min(
    100,
    Math.max(0, (e.offsetY / height) * 100)
  );
  console.log(`Clicked at ${percent.toFixed(1)}%`);
});
Try It Yourself

How It Works

  1. Read local Y. offsetY is already relative to the control.
  2. Divide by height. clientHeight is the inner height of the element.
  3. Scale to 0–100. Multiply by 100 and clamp so edges stay in range.
  4. Why it helps. The percentage still makes sense when the control resizes.
Compatibility

Browser Support

MouseEvent.offsetY is Baseline Widely available (MDN: since December 2015). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

MouseEvent.offsetY

Element-local vertical pointer coordinate from the target’s padding edge — ideal for hit-testing and local drawing.

Universal Widely 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
offsetY Excellent

Bottom line: Safe to use in modern browsers. Pair with offsetX for local 2D points, and use clientY/pageY when you need viewport or document space.

Frequently Asked Questions

It is a read-only number: the vertical offset of the mouse pointer from the padding edge of the event’s target element, measured in CSS pixels.
No. MDN marks MouseEvent.offsetY as Baseline Widely available (since December 2015). It is not Deprecated, Experimental, or Non-standard.
offsetY is measured from the top padding edge of the target node—inside the border, at the start of the padding box. Borders are outside that origin; padding and content are inside.
clientY is relative to the browser viewport. offsetY is relative to the element that received the event (event.target). The same spot on a moved element keeps a similar offsetY, while clientY changes with the window position.
pageY is relative to the whole document (includes vertical scroll). offsetY stays local to the target element’s padding box and does not grow just because the page scrolled.
A double (floating-point) number in pixels. Early versions of the spec defined it as an integer; modern browsers report a double.

Next: MouseEvent.pageX

Learn the document-relative X coordinate that includes horizontal scroll.

pageX 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 offsetX Property JavaScript MouseEvent pageX Property