intersection-ratio-with-fractional-bounds-in-iframe-content.html (1436B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <style> 6 body { 7 margin: 0; 8 height: 100%; 9 } 10 .app { 11 display: flex; 12 width: 100%; 13 } 14 .sidebar { 15 width: 31.1%; 16 margin: 0; 17 background: rgb(231, 249, 139); 18 } 19 section { 20 width: 68.9%; 21 background-color: rgb(119, 219, 172); 22 border: dashed red 3px; 23 } 24 p { 25 margin-top: 0; 26 } 27 </style> 28 </head> 29 <body> 30 <div class=app> 31 <div class="sidebar"></div> 32 <section id=target> 33 <h2>Observer target</h2> 34 <p><strong>Intersection ratio:</strong> <span id=ratio></span></p> 35 </section> 36 </div> 37 38 <script> 39 const onIntersection = entries => { 40 const ratio = entries[0].intersectionRatio; 41 const eventData = { intersectionRatio: ratio }; 42 document.getElementById("ratio").innerText = ratio.toFixed(5); 43 const event = new CustomEvent("iframeObserved", {detail: eventData}); 44 parent.document.dispatchEvent(event); 45 }; 46 const observer = new IntersectionObserver(onIntersection, {threshold: 1}); 47 setTimeout(() => {observer.observe(document.getElementById("target"))}, 0); 48 </script> 49 </body> 50 </html>