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

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.