[JS] Intersection Observer

<!-- link: https://jsfiddle.net/5rnLwcab/15/-->

<div class="container">
  <div class="box" id="box-1">box 1</div>
  <div class="box" id="box-2">box 2</div>
  <div class="box" id="box-3">box 3</div>
  <div class="box" id="box-4">box 4</div>
  <div class="box" id="box-5">box 5</div>
</div>

<script>
const io = new IntersectionObserver(entries => {
    const io = new IntersectionObserver(entries => {
    for (const entry of entries) {
    console.log(`${entry.target.id} is in view ${entry.isIntersecting}`)
  }
})

document.querySelectorAll('.box').forEach(elem => {
    io.observe(elem)
})
</script>

<style>
.container {
 min-height: 400px;
}

.box {
  background-color: steelblue;
  margin-bottom: 200px;
}
</style>