Document Coordinates and Viewport Coordinates

the “viewport” is the portion of the browser that actually displays document content

If the document is smaller than the viewport, or if it has not been scrolled, the upper- left corner of the document is in the upper-left corner of the viewport and the document and viewport coordinate systems are the same.

In general, however, to convert between the two coordinate systems, we must add or subtract the scroll offsets.

Querying the Geometry of an Element

The easiest way to determine the size and position of an element is to call its getBoundingClientRect() method. It expects no arguments and returns an object with properties left, right, top, and bottom.

Determing the Element at a Point

Sometimes we want to go in the other direction and determine which element is at a given location in the viewport. You can determine this with the elementFromPoint() method of the Document object.

Scrolling

The scrollTo() method of the Window object (and its synonym scroll()) takes the X and Y coordinates of a point (in document coordinates) and sets these as the scrollbar offsets.

The scrollBy() method of the Window is similar to scroll() and scrollTo(), but its arguments are relative and are added to the current scrollbar offsets.

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

clientWidth and clientHeight are like offsetWidth and offsetHeight except that they do not include the border size, only the content area and its padding. Also, if the browser has added scrollbars between the padding and the border, clientWidth and clientHeight do not include the scrollbar in their returned value.

scrollWidth and scrollHeight are the size of an element’s content area plus its padding plus any overflowing content. When the content fits within the content area without overflow, these properties are the same as clientWidth and clientHeight.