Check if Element is in Viewport

/**
 * Check if element is in viewport
 * @param element Target element
 * @param fullyInView Check if element is fully visible (default: false)
 * @returns True if element is in viewport
 */
function isInViewport(element: HTMLElement, fullyInView = false): boolean {
  const rect = element.getBoundingClientRect();
  const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  const viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);

  if (fullyInView) {
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= viewHeight &&
      rect.right <= viewWidth
    );
  }

  return (
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.top < viewHeight &&
    rect.left < viewWidth
  );
}

// Usage Example
const element = document.getElementById('target');
window.addEventListener('scroll', () => {
  if (isInViewport(element)) {
    console.log('Element is visible!');
    element.classList.add('visible');
  } else {
    element.classList.remove('visible');
  }
});