What is the difference between screenX/Y, clientX/Y and pageX/Y?

javascript ipad safari mouse-position
hmthr picture hmthr · May 20, 2011 · Viewed 220.8k times · Source

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?

It would be great if you could point me to an example.

Answer

Dan picture Dan · Jan 30, 2014

Here's a picture explaining the difference between pageY and clientY.

pageY vs 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

You'll probably never need screenX/Y

Related questions

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I'm writing a web app for the iPad (not a regular App Store app - it's written using HTML, CSS and JavaScript). Since the keyboard fills up a huge part of the screen, it would make sense to change the …

Read More
Difference between onbeforeunload and onunload

What are the differences between onbeforeunload and onunload ? Also I have a specific question related to it's use on the iPad...I have a page (myPage.html) where I am trying to show an alert when the page is closed (…

Read More
In mobile devices' safari, <a href="#" onclick="return false"> doesn't work, why?

In moblie devices' safari, like iphone or ipad, <a href="#" onclick="return false"> doesn't prevent default behaviour, the page was still redirected to '#', why...? Like these html code: <div style="height:1000px; width:100px">&…

Read More