Intersection observer✓Baseline · Widely available

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target);
    }
  }
}, { rootMargin: "0px 0px -10% 0px" });

document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));

if ("IntersectionObserver" in globalThis) {
  // IntersectionObserver is available
} else {
  // load a polyfill or use a fallback
}