Skip to main content

elementInViewport() ↔ utility to check IF HTMLElement inside Viewport

/**
 * elementInViewport vs isInViewport better name?
 *
 * @param element HTMLElement to check
 * @returns boolean if inside viewport
 */

export function elementInViewport(element: HTMLElement) {
  const rect = element.getBoundingClientRect()
  return (
    rect.top \>= 0 &&
    rect.left \>= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}

References​