<!DOCTYPE html>
<!--
  target should be fully vertically in-viewport as 100px is way less than the
  default iframe height.

  right: 0 makes sure that we're occluded by 8px by the intermediate iframe.
-->
<div id="target" style="width: 100px; height: 100px; position: absolute; right: 0"></div>
<script>
const observer = new IntersectionObserver(records => {
  if (records[0].isIntersecting) {
    let { rootBounds, intersectionRect } = records[0];
    window.top.postMessage({ rootBounds, intersectionRect }, "*");
  }
}, {});
observer.observe(document.getElementById("target"));
</script>
