Detect Element Visibility Using IntersectionObserver

function observeElementVisibility(elementId, callback, options = {}) {
  const element = document.getElementById(elementId);
  if (!element) {
    console.warn(`Element with ID '${elementId}' not found for observation.`);
    return null;
  }

  // Default options for IntersectionObserver
  const defaultOptions = {
    root: null, // viewport as root
    rootMargin: '0px', // No margin around the root
    threshold: 0.1 // Trigger callback when 10% of element is visible
  };

  const observerOptions = { ...defaultOptions, ...options };

  const observer = new IntersectionObserver((entries, observerInstance) => {
    entries.forEach(entry => {
      callback(entry.isIntersecting, entry, observerInstance);
    });
  }, observerOptions);

  observer.observe(element);
  console.log(`Observing element '${elementId}' for visibility changes.`);
  return observer; // Return the observer instance to allow unobserving later
}

// Example Usage:
// HTML: <div id="myVisibleElement" style="height: 200px; background: lightblue; margin-top: 1000px;">Scroll down to see me!</div>
const handleVisibilityChange = (isVisible, entry, observer) => {
  if (isVisible) {
    console.log(`Element '${entry.target.id}' is now visible!`);
    entry.target.style.background = 'lightgreen';
    // Optional: Stop observing once it's visible (for lazy loading scenarios)
    // observer.unobserve(entry.target);
  } else {
    console.log(`Element '${entry.target.id}' is no longer visible.`);
    entry.target.style.background = 'lightblue';
  }
};

const myObserver = observeElementVisibility('myVisibleElement', handleVisibilityChange, { threshold: 0.5 });

// To stop observing later (e.g., when the element is removed or no longer needed):
// if (myObserver) {
//   myObserver.disconnect();
//   console.log('Observer disconnected.');
// }