Knowing the Bounding Rectangle

el.getBoundingClientRect() returns a DOMRect (top, left, right, bottom, width, height) for the border box, in fractional CSS pixels from the viewport's top-left corner, including CSS transforms. Add scrollX and scrollY for page coordinates. The integer offsetHeight (border box), clientHeight (padding box minus scrollbar) and scrollHeight (all scrollable content) ignore transforms.

getBoundingClientRect() coordinates (left) and the three height properties of a scrolling box (right)
getBoundingClientRect() coordinates (left) and the three height properties of a scrolling box (right)