JS Browser Coordinates

Below you see a test view with two fixed panels left and right, displaying coordinates and sizes live when you scroll or resize the browser window, or the yellow panel. For specification of these "attributes" see w3c CSS Object Model, for a short description the table in the middle.

The variable window is a global JS variable, available in browser contexts (not in standalone JS engines), as is document, being a shortcut for window.document, containing the field document.documentElement, which represents the HTML element, and document.body, which represents the BODY element. Mind that window is not an "element", but documentElement and body are.

The right view is about the JS element.getBoundingClientRect() function, which gives you viewport-relative coordinates of an HTML element. The viewport is the currently visible part of the HTML page (that may be much bigger). By using boundingClientRect together with window.page*Offset (see left view) you can calculate any element's page-absolute coordinates.

CAUTION: the values you see here may be browser-specific! For example, Firefox provides scrollTop on the document.documentElement, while Webkit browsers like Opera and Chrome provide it on document.body.

Window

pageXOffset	Distance between left edge of page and left edge of viewport
pageYOffset	Distance between upper edge of page and upper edge of viewport
innerWidth	Width of page, including scrollbars, excluding browser edge decorations
innerHeight	Height of page, including scrollbars, excluding browser title- and tool-bars
outerWidth	Width of browser window, including browser edge decorations
outerHeight	Width of browser window, including browser title bar
scrollX	Same as pageXOffset, but deprecated
scrollY	Same as pageYOffset, but deprecated

Element

scrollLeft	Distance between left edge of element and left edge of its visible part
scrollTop	Distance between upper edge of element and upper edge of its visible part
scrollWidth	Overall width of element, including overflowing parts
scrollHeight	Overall height of element, including overflowing parts
clientWidth	Visible width, excluding margin, border, scrollbar and overflow
clientHeight	Visible height, excluding margin, border, scrollbar and overflow
clientTop	Thickness of border on top of the element
clientLeft	Thickness of border on left of the element

Colored Box 1

Colored Box 2

Globals

window

property	value
pageXOffset	0
pageYOffset	0
innerWidth	1280
innerHeight	720
outerWidth	1280
outerHeight	720
scrollX	0
scrollY	0

documentElement

property	value
scrollLeft	0
scrollTop	0
scrollWidth	1280
scrollHeight	5449
clientWidth	1280
clientHeight	720

body

property	value
scrollLeft	0
scrollTop	0
scrollWidth	1280
scrollHeight	5408
clientWidth	1280
clientHeight	5408

Colored Box 1

property	value
scrollTop	0
scrollHeight	200
clientHeight	200

Scroll Box 2

property	value
scrollTop	0
scrollHeight	400
clientHeight	200

getBoundingClientRect()

documentElement

left	top	width	height
0	0	1280	5449

body

left	top	width	height
0	21	1280	5408

Colored Box 1

left	top	width	height
407	4353	200	200

Colored Box 2

left	top	width	height
407	4603	180	400

Try to launch this page on different browsers. You can also go to my homepage and use the newest version of this.

What to learn here

The best way to calculate page-absolute coordinates for an element is using element.getBoundingClientRect() that gives viewport-relative coordinates, and window.pageYOffset (or, when not present, document.documentElement.scrollTop) that gives page-absolute coordinates of the viewport.

Here is a function that gives the browser's viewport rectangle:

    var browserViewPort = function() {
      var rectangle = {
        left: (window.pageXOffset !== undefined) ? window.pageXOffset : document.documentElement.scrollLeft,
        top: (window.pageYOffset !== undefined) ? window.pageYOffset : document.documentElement.scrollTop,
        width: (window.innerWidth !== undefined) ? window.innerWidth : document.documentElement.clientWidth,
        height: (window.innerHeight !== undefined) ? window.innerHeight : document.documentElement.clientHeight
      };
      rectangle.right = rectangle.left + rectangle.width;
      rectangle.bottom = rectangle.top + rectangle.height;
      return rectangle;
    };

This should work on all modern browsers. Webkit (Chrome, Opera, Safari) and Firefox provide window.pageYOffset, and newer InternetExplorer versions provide document.documentElement.scrollTop.

Having the browser's viewport we can calculate the page-absolute coordinates of any element by using element.getBoundingClientRect().

    var absoluteRectangle = function(element) {
      var browserRect = browserViewPort();
      var boundingClientRect = element.getBoundingClientRect();
      return {
        left: boundingClientRect.left + browserRect.left,
        top: boundingClientRect.top + browserRect.top,
        right: boundingClientRect.right + browserRect.left,
        bottom: boundingClientRect.bottom + browserRect.top,
        width: boundingClientRect.width,
        height: boundingClientRect.height
      };
    };

Mind that scrollTop for any element, except document.documentElement and/or document.body, does NOT give the distance to the page top. Moreover it gives the position of its scrollbar in case it is a scrollable container. So for all elements not having a scrollbar this will be zero.