<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)
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.