Understanding Browser Distance and Size Properties for Frontend Development

In web development we often need to compute distances and dimensions of elements, for example to highlight steps in an onboarding component, position popovers, or trigger infinite scrolling when reaching the page bottom.

The visible part of the page is called the viewport; the scroll bar indicates the current viewport position. When a user clicks inside the viewport, the event object provides several Y‑axis properties:

e.pageY – distance from the click to the top of the document.

e.clientY – distance from the click to the top of the viewport.

e.offsetY – distance from the click to the top of the event target element (not available in React synthetic events).

e.screenY – distance from the click to the top of the screen.

React synthetic events lack offsetY , so you can compute it manually using e.pageY - element.getBoundingClientRect().top - window.scrollY or use the react-use hook useMouse which performs this calculation.

Element geometry can also be obtained via element.getBoundingClientRect() , which returns top , left , width , and height . The top value is the distance from the element to the viewport top.

Scrolling distances are accessed through:

window.scrollY (alias window.pageYOffset ) – page scroll offset.

element.scrollTop – scroll offset of a scrollable element.

Other useful properties include:

element.offsetTop – distance from the element to the nearest positioned ancestor’s content edge.

element.clientTop – thickness of the element’s top border.

element.offsetHeight – element height including borders.

element.clientHeight – height of the content area, excluding borders.

element.scrollHeight – total height of the scrollable content, excluding borders.

When the page is rotated or transformed, getBoundingClientRect().height may differ from offsetHeight because it returns the bounding box size.

To detect when the user has scrolled to the bottom, compare window.scrollY + window.innerHeight with document.documentElement.scrollHeight .

Below are representative code snippets used in the article:

import { MouseEventHandler, useEffect, useRef } from 'react';

function App() {
  const ref = useRef
(null);

  const clickHandler: MouseEventHandler
= (e) => {
    console.log('box pageY', e.pageY);
    console.log('box clientY', e.clientY);
    console.log('box offsetY', e.pageY - ref.current!.getBoundingClientRect().top - window.scrollY);
    console.log('box screenY', e.screenY);
  };

  useEffect(() => {
    document.getElementById('box')!.addEventListener('click', (e) => {
      console.log('box2 pageY', e.pageY);
      console.log('box2 clientY', e.clientY);
      console.log('box2 offsetY', e.pageY - e.currentTarget.getBoundingClientRect().top - window.scrollY);
      console.log('box2 screenY', e.screenY);
    });
  }, []);

  return (
);
}

export default App;

By mastering these properties you can reliably handle positioning, sizing, and scroll‑related interactions in modern front‑end projects.