Document Coordinates and Viewport Coordinates

[IOriens]

Document Coordinates and Viewport Coordinates

Querying the scrollbar positions of a window

// Return the current scrollbar offsets as the x and y properties of an object 
function getScrollOffsets(w) {

  // Use the specified window or the current window if no argument 
  w = w || window;

  // This works for all browsers except IE versions 8 and before
  if (w.pageXOffset != null) {
    return {
      x: w.pageXOffset,
      y: w.pageYOffset
    };
  }

  // For IE (or any browser) in Standards mode var d = w.document;
  if (document.compatMode == "CSS1Compat") {
    return {
      x: d.documentElement.scrollLeft,
      y: d.documentElement.scrollTop
    };
  }

  // For browsers in Quirks mode
  return {
    x: d.body.scrollLeft,
    y: d.body.scrollTop
  };
}

Querying the viewport size of a window

// Return the viewport size as w and h properties of an object 
function getViewportSize(w) {

  // Use the specified window or the current window if no argument 
  w = w || window;

  // This works for all browsers except IE8 and before
  if (w.innerWidth != null) {
    return {
      w: w.innerWidth,
      h: w.innerHeight
    };
  }

  // For IE (or any browser) in Standards mode 
  var d = w.document;
  if (document.compatMode == "CSS1Compat") {
    return {
      w: d.documentElement.clientWidth,
      h: d.documentElement.clientHeight
    };
  }

  // For browsers in Quirks mode    
  return {
    w: d.body.clientWidth,
    h: d.body.clientWidth
  };

}

Querying the Geometry of an Element

Positioning

Old School

All HTML elements have offsetLeft and offsetTop properties that return the X and Y coordinates of the element. For many elements, these values are document coordinates and directly specify the position of the element. But for descendants of positioned el- ements and for some other elements, such as table cells, these properties return coor- dinates that are relative to an ancestor element rather than the document.

function getElementPositionInDocument(e) {
  var x = 0, y = 0;
  while (e != null) {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return {
    x: x,
    y: y
  };
}

// Equals to getBoundingClientRect() 
function getElementPosInViewPort(elt) { 
  var x = 0,
    y = 0;

  // Loop to add up offsets
  for (var e = elt; e != null; e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
  }

  // Loop again, through all ancestor elements to subtract scroll offsets.
  // This subtracts the main scrollbars, too, and converts to viewport coords. 
  for (var e = elt.parentNode; e != null && e.nodeType == 1; e = e.parentNode) {
    x -= e.scrollLeft;
    y -= e.scrollTop;
  }

  return {
    x: x,
    y: y
  };
}

Modern

var box = e.getBoundingClientRect(); // Get position in viewport coordinates 
var offsets = getScrollOffsets(); // Utility function defined above
var x = box.left + offsets.x; // Convert to document coordinates
var y = box.top + offsets.y; 

Element size

Old School

Element size is easy: the readonly offsetWidth and offsetHeight properties of any HTML element return its on screen size, in CSS pixels.

Modern

var box = e.getBoundingClientRect();
var w = box.width || (box.right - box.left);  // Width of the element 
var h = box.height || (box.bottom - box.top);  // Height of  the element

Scrolling

Scroll TO

// Get the height of the document and viewport. offsetHeight is explained below. 
var documentHeight = document.documentElement.offsetHeight;
var viewportHeight = window.innerHeight; // Or use getViewportSize() above

// And scroll so the last "page" shows in the viewport
window.scrollTo(0, documentHeight - viewportHeight); 

Scroll BY

// Scroll 10 pixels down every 200 ms. Note there is no way to turn this off! 
javascript:void setInterval(function() {scrollBy(0,10)}, 200); 

Reference

what-is-offsetheight-clientheight-scrollheight javascript-getboundingclientrect-changes-while-scrolling Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9