| <!DOCTYPE html> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #target { | |
| position: absolute; | |
| height: 150px; | |
| width: 150px; | |
| background-color: green; | |
| } | |
| </style> | |
| <div id="target"></div> | |
| <script> | |
| let observer = new IntersectionObserver((observations) => { | |
| const lastObservation = observations[observations.length - 1]; | |
| window.top.postMessage({ | |
| isIntersecting: lastObservation.isIntersecting | |
| }, "*"); | |
| }); | |
| observer.observe(document.getElementById("target")); | |
| </script> |