Skill Maps

Page Geometry

Sometimes you need to calculate the exact pixel size of elements or force the browser to scroll to a specific place.

1. Dimensions

  • offsetWidth / offsetHeight: The " outer " size of an element (includes content, padding, AND borders).
  • clientWidth / clientHeight: The " inner " size (includes content and padding, but NO borders or scrollbars).

Let's check the full outer height of the document body:

JS Console

Type: document.body.offsetHeight

2. Scrolling

  • scrollLeft / scrollTop: How many pixels the element has been scrolled from its top/left edge.
  • scrollIntoView(true): A magical method that forces the browser window to scroll until the element becomes visible!

Try scrolling back to the top of the page instantly:

JS Console

Type: document.body.scrollIntoView()

Important

The offset* and client* properties return pure NUMBERS (like 300), not strings with " px " (like "300px"). This makes them extremely convenient for math calculations.

Warning

Keep in mind that reading geometry properties forces the browser to recalculate the page layout synchronously. Doing this too often in a loop can cause massive performance issues ( " layout thrashing " ).