<div id="content">
<table>
<thead>
<tr>
<th>property</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>target</td>
<td><span id="target"></span></td>
</tr>
<tr>
<td>isIntersecting</td>
<td><span id="isIntersecting"></span></td>
</tr>
<tr>
<td>time</td>
<td><span id="time"></span></td>
</tr>
<tr>
<td>intersectionRatio</td>
<td><span id="intersectionRatio"></span></td>
</tr>
</tbody>
</table>
<div id="box">
<p>Please scroll down</p>
<div class="space"></div>
<div class="target" id="target1">
<p>target1</p>
<p>{root: null, rootMargin: '0px', threshold: 1.0}</p>
</div>
<div class="space"></div>
<div class="target" id="target2">
<p>target2</p>
<p>{root: root, rootMargin: '200px', threshold: 0}</p>
</div>
<div class="space"></div>
<div class="target" id="target3">
<p>target3</p>
<p>{root: null, rootMargin: '0px', threshold: [0, 0.25, 0.5, 0.75, 1]}</p>
</div>
</div>
</div>
#content {
display: flex;
position: fixed;
}
table {
margin-top: 16px;
border-collapse: collapse;
}
table th, table td {
border: solid 1px #ccc;
padding: 4px;
}
#box {
margin-left: 20px;
width: 420px;
height: 300px;
border: 1px solid #777;
background-color: #E8FFE0;
overflow: scroll;
}
.space {
height: 1000px;
}
.target {
height: 100px;
background-color: #0DFFC9;
}
const callback = (entries, observer) => {
entries.forEach(entry => {
document.getElementById('target').textContent = entry.target.id
document.getElementById('time').textContent = entry.time
document.getElementById('isIntersecting').textContent = entry.isIntersecting
document.getElementById('intersectionRatio').textContent = entry.intersectionRatio
console.log(entry.boundingClientRect)
console.log(entry.intersectionRect)
})
}
try {
const options1 = {root: null, rootMargin: '0px', threshold: 1.0}
const observer1 = new IntersectionObserver(callback, options1)
const target1 = document.getElementById('target1')
observer1.observe(target1)
const root = document.getElementById('box')
const options2 = {root: root, rootMargin: '200px', threshold: 0}
const observer2 = new IntersectionObserver(callback, options2)
const target2 = document.getElementById('target2')
observer2.observe(target2)
const options3 = {root: null, rootMargin: '0px', threshold: [0, 0.25, 0.5, 0.75, 1]}
const observer3 = new IntersectionObserver(callback, options3)
const target3 = document.getElementById('target3')
observer3.observe(target3)
} catch(e) {
console.log(e)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.