Can I detect the user viewable area on the browser?

Question

As you can see the image below, there is \"A\", \"B\", \"C\", \"D\" and \"E\" on the website, and the user may only can see the A, B, and a little parts of D in their browse

Answer 1

Using the following, you can get the browser's viewport size.

window.innerHeight;
window.innerWidth;

http://bit.ly/zzzVUv - Had to use Google Cache as site would not load for me. Original page: http://www.javascripter.net/faq/browserw.htm

If you want to detect how far they have scrolled down the page, you can use

window.scrollX;   // Horizontal scrolling
window.scrollY;   // Vertical scrolling

Also, I have found a window object - window.screen. On my system it has the following data:

window.screen.availHeight = 994;
window.screen.availLeft = 0;
window.screen.availTop = 0;
window.screen.availWidth = 1280;
window.screen.colorDepth = 32;
window.screen.height = 1280;
window.screen.pixelDepth = 32;
window.screen.width = 1280;

I hope these answer your question sufficiently.