Element Node Geometry and Scrolling Geometry

Element Node Geometry and Scrolling Geometry

DOM nodes are parsed and painted into visual shapes when viewing HTML documents in a web browser. Nodes, mostly element nodes, have a corresponding visual representation made viewable/visual by browsers. To inspect and in some cases manipulate the visual representation and geometry of nodes programmatically, a set of APIs exist and are specified in the CSSOM View Module. A subset of methods and properties found in this specification provide an API to determine the geometry (i.e., size and position using offset) of element nodes as well as hooks for manipulating scrollable nodes and getting values of scrolled nodes

Most of the properties (excluding scrollLeft and scrollTop) from the CSSOM View Module specification are read-only and calculated each time they are accessed. In other words, the values are live.

Getting an Element’s offsetTop and offsetLeft Values Relative to the offsetParent

Using the properties offsetTop and offsetLeft, we can get the offset pixel value of an element node from the offsetParent. These element node properties give us the distance in pixels from an element’s outside top and left borders to the inside top and left borders of the offsetParent. The value of the offsetParent is determined by searching the nearest ancestor elements for an element that has a CSS position value not equal to static. If none are found, the element, or what some refer to as the “document” (as opposed to the browser viewport), is the offsetParent value.

<div id="red"><div id="green"></div></div>

#red {
  background: red;
  border:1px solid blue;
#green {
  background: green;
  border:1px solid black;

var reddiv = document.querySelector('#red');  
var greendiv = document.querySelector('#green');  

If the red div is set to position:absolute;the offsetParent property is <div id="red"></div>

Using getBoundingClientRect()

Using the getBoundingClientRect() method, we can get the position of an element’s outside border edges as the element is painted in the browser viewport relative to the top and left edges of the viewport. This means the left and right edges are measured from the outside border edge of an element to the left edge of the viewport, and the top and bottom edges are measured from the outside border edge of an element to the top edge of the viewport.

var Edges = document.querySelector('#red').getBoundingClientRect();  

Getting an Element’s Size (Border + Padding + Content) in the Viewport

The getBoundingClientRect() method returns an object with a top, right, bottom, and left property/value as well as a height and width property/value. The height and width properties indicate the size of the element where the total size is derived by adding together the content of the div, its padding, and its borders.


Getting an Element’s Size (Padding + Content) in the Viewport, Excluding Borders

The clientWidth and clientHeight properties return the total size of an element by adding together the content of the element and its padding, excluding the border sizes.


Using elementFromPoint() to Get the Topmost Element in the Viewport at a Specific Point

Using elementFromPoint(), it’s possible to get a reference to the topmost element in an HTML document at a specific point in the document.

<div id="bottom"></div><div id="top"></div>  
div {  
  height: 50px;
  width: 50px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
console.log(document.elementFromPoint(50,50)); //<div id="top">  

Using scrollHeight and scrollWidth to Get the Size of the Element Being Scrolled

The scrollHeight and scrollWidth properties simply give you the height and width of the node being scrolled.

Using scrollTop and scrollLeft to Get and Set Pixels Scrolled from the Top and Left

The scrollTop and scrollLeft properties are read/write properties that return the pixels to the left or top that are not currently viewable in the scrollable viewport due to scrolling.

Using scrollIntoView() to Scroll an Element into View

By selecting a node contained inside a node that is scrollable, we can tell the selected node to scroll into view by using the scrollIntoView() method.

<button id="top">send it</button>  
var button = document.getElementById('top');  
var p1 = document.querySelector('p');  
var scrollToTopFunction = function() {