check if an element is visible in the viewport in javascript

index.tsx
function isElementInViewport(el) {
  // Get element's position and size
  var rect = el.getBoundingClientRect();

  // Check if element is fully visible
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// Example usage:
var myElement = document.getElementById('my-element');

if (isElementInViewport(myElement)) {
  console.log('Element is fully visible in the viewport');
} else {
  console.log('Element is not fully visible in the viewport');
}
622 chars
22 lines

index.tsx
var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      console.log('Element is fully visible in the viewport');
    } else {
      console.log('Element is not fully visible in the viewport');
    }
  });
});

var myElement = document.getElementById('my-element');
observer.observe(myElement);
379 chars
13 lines