Sizes, scrolling & coordinates

The map of every box

Front-end work often asks deceptively physical questions: how wide is this card, how far has this panel scrolled, where is this button on the screen, and what is under the pointer right now? The browser already knows, because it has just laid out the page. This lesson is about reading those answers without guessing.

There are two families of measurements. Box measurements describe an element’s own rectangle: its content, padding, border, scrollbar, and overflowing content. Coordinate measurements describe where a rectangle or point sits in the viewport or in the whole document. Mixing those two is the source of most layout bugs.

The previous lesson, Styles & classes, changed how elements look. Now you will read the layout that those styles produce. You may recognize the rendering rhythm from the Event loop lesson: write styles, let the browser calculate layout, then read measurements in deliberate batches.

The three names tell you which part of the box you are reading:

• offsetWidth and offsetHeight are the border box: content + padding + border, plus a scrollbar if it takes layout space. They are rounded integers and ignore transforms.
• clientWidth and clientHeight are the inside of the border: content + padding, minus scrollbar space. clientTop and clientLeft are roughly the top and left border widths.
• scrollWidth and scrollHeight are the full scrollable content size, including overflow that is currently out of view. scrollTop and scrollLeft are writable positions inside that scrollable content.

Try the playground slowly. Turn on padding first: both offset and client sizes grow. Turn on the border: offset grows again, but client does not. Turn on overflow: scrollHeight grows because the invisible content still exists.

1const hiddenBelow = element.scrollHeight - element.scrollTop - element.clientHeight;2const atBottom = hiddenBelow <= 1;

A common pattern for infinite lists and “back to top” buttons is checking whether the inner scroll position is near the bottom:

1const hiddenBelow = element.scrollHeight - element.scrollTop - element.clientHeight;2const atBottom = hiddenBelow <= 1;

The small tolerance matters. CSS pixels can be fractional, and some measurements are rounded. Professional code often asks “within one or two pixels?” instead of demanding perfect equality.

Now step through the exact arithmetic. The box has a scroll height of 300, the visible client height is 100, and it has already scrolled down 199 pixels. Is one pixel left enough to count as “at the bottom”? Change the tolerance and predict before stepping.

1const box = { scrollTop: 199, clientHeight: 100, scrollHeight: 300 };Run2const hiddenBelow = box.scrollHeight - box.scrollTop - box.clientHeight;3const atBottom = hiddenBelow <= 2;4console.log(atBottom);

element.getBoundingClientRect() returns a DOMRect: top, left, right, bottom, width, and height. The rectangle is the element’s border box, and the coordinates are relative to the viewport. That means rect.top changes when the reader scrolls the page.

The rectangle can contain fractional values and includes transforms. Toggle the scale below: getBoundingClientRect().width changes visually, but offsetWidth stays the layout width.

1const rect = target.getBoundingClientRect();2const pageTop = rect.top + window.scrollY;

Scrolling APIs come in pairs. scrollTo moves to an absolute position. scrollBy moves relative to the current position. Both work on elements and on window: window.scrollTo({ top: 0, behavior: "smooth" }) scrolls the page to the top after a user clicks a button. Avoid yanking the reader’s page automatically.

element.scrollIntoView() is often more convenient: it asks the browser to reveal a particular item. block: "nearest" means “move as little as necessary,” which feels better inside nested scroll containers.

1list.scrollBy({ top: 80, behavior: "smooth" });2item.scrollIntoView({ behavior: "smooth", block: "nearest" });

Scroll events can fire rapidly. If each event reads layout, writes styles, reads again, and writes again, you can force synchronous layout repeatedly. That pattern is called layout thrashing. Batch reads together, batch writes together, and use requestAnimationFrame for visual updates.

1let ticking = false;2box.addEventListener("scroll", () => {3  if (!ticking) {4    requestAnimationFrame(updateReadout);5    ticking = true;6  }7}, { passive: true });

Use { passive: true } for scroll listeners when you do not call preventDefault(). It tells the browser the listener will not block scrolling. For “tell me when this card becomes visible,” prefer IntersectionObserver; a later Observers lesson covers it. Modern browsers are also adding scrollend; feature-detect it with "onscrollend" in document before relying on it.

document.elementFromPoint(x, y) asks the browser which element is topmost at a point in the viewport. It uses the same coordinate system as pointer events’ clientX and clientY. If the point is outside the viewport, the result can be null.

1area.addEventListener("pointermove", (event) => {2  const hit = document.elementFromPoint(event.clientX, event.clientY);3});

Where you’ll use this

Measurement code appears in everyday interfaces. A tooltip reads its target’s rect and positions itself in viewport space. A chat app checks whether the message list is near the bottom before auto-scrolling. A virtualized list uses client height and scrollTop to decide which rows to render. A drawing tool uses elementFromPoint to choose the layer under the pointer.

1const rect = button.getBoundingClientRect();2const top = rect.bottom + window.scrollY;3const left = rect.left + window.scrollX;4 5tooltip.style.transform = `translate(${left}px, ${top}px)`;

Notice the order: read the rectangle, compute document coordinates, then write one style. If you need several measurements, read them all first; then apply classes or styles. That keeps the browser from recalculating layout over and over.

Misconceptions and edge cases

• “offsetWidth and getBoundingClientRect().width are the same.” Not always. offsetWidth is an integer layout size and ignores transforms; getBoundingClientRect() can be fractional and includes transforms.
• “clientWidth is the content width.” It includes padding and excludes borders. If a scrollbar takes space, it is subtracted.
• “rect.top is a permanent page position.” It is a viewport position. Add scrollY for document coordinates.
• “Reading layout is free.” Reading after style writes can force synchronous layout. Batch reads and writes.
• “Hidden elements measure normally.” Elements with display: none measure as 0 and have offsetParent of null.
• “elementFromPoint uses pageX and pageY.” It uses viewport coordinates. Use clientX and clientY.

Key takeaways

• offset* reads the rounded border box and ignores transforms.
• client* reads the inside of the border; scroll* reads the whole scrollable content.
• getBoundingClientRect() returns a fractional, transformed border box relative to the viewport.
• Document coordinates are viewport coordinates plus scrollX and scrollY.
• Batch layout reads and writes; throttle scroll visuals with requestAnimationFrame.
• elementFromPoint uses viewport coordinates and returns what is topmost there.

Sizes tell you the dimensions of boxes; coordinates tell you where those boxes and points are in the viewport or document.

Up next: Selection & Range.