<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Simple Intersection Obsever in iframe</title>
    <meta name="viewport" content="width=600">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    
    <style>
        body {
            height: 5000px;
            font-family: Helvetica;
        }

        section {
            margin-top: 2000px;
        }

        iframe {
            width: 400px;
            height: 300px;
        }
        
        h2 {
            margin-top: 0.2em;
            margin-bottom: 0.25em;
        }
    </style>
    <script>
        var observer;
        function doSetup()
        {
            observer = new IntersectionObserver(intersectedCallback, { threshold: [
                0,
                0.1,
                0.2,
                0.3,
                0.4,
                0.5,
                0.6,
                0.7,
                0.8,
                0.9,
                1
            ] });
            
            let iframe = document.getElementById('iframe');
            let target = iframe.contentDocument.getElementById('target');
            observer.observe(target);
        }
        window.addEventListener('load', doSetup, false);
    </script>
</head>
<body>

<div class="results">
<h2>Logging</h2>
<button onclick="clearLog()" class="clear">🗑</button>
<pre id="logging"></pre>
</div>

<p>Scroll down to see the iframe.</p>
<section>
<h2>&lt;iframe&gt;</h2>
<iframe id="iframe" srcdoc="<style>
        body {
            height: 5000px;
            font-family: Helvetica;
        }
        
        #target {
            position: absolute;
            left: 10px;
            width: 170px;
            height: 200px;
            top: 2800px;
            padding: 40px;
            box-sizing: border-box;
            font-size: 24pt;
            background-color: rgba(119, 104, 113, 1);
            color: white;
            text-align: center;
            border-radius: 10px;
        }
</style>
<p>Scroll down to see the target</p>
<div id='target'>Target</div>"></iframe>
</section>

</body>
</html>