JS Browser Coordinates


Published: 2015-12-07
Updated: 2015-12-28
Web: https://fritzthecat-blog.blogspot.com/2015/12/browser-coordinates.html


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.

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.





ɔ⃝ Fritz Ritzberger, 2015-12-07