blob: 3f5f3fcbe2c8d111634e8dba5e299619b3c85ba8 [file] [log] [blame]
<!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>