JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<div class="container">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</div>

<div class="window"></div>

CSS

div.container {
  display: flex;
  flex-wrap: wrap;
  margin: 10vh 10vw;
  width: 80vw;
  height: 80vh;
  justify-content: center;

  border: solid 3px #333;
  box-sizing: border-box;
}
section {
  height: 60px;
  width: 60px;
  border: solid 1px #888;
  margin: 0 20px 20px 0;
}
div.window {
  position: fixed;
  top: 90px;
  right: 200px;
  height: 250px;
  width: 250px;
  border: solid 1px #fa4;
}

JavaScript

const callback =(entries, observer) => {
  entries.forEach(entry => {
  	console.log(entry.intersectionRatio)
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  })
}

const options = {
    root: document.querySelector('.window'),
    rootMargin: '0px',
    threshold: 0
}

const observer = new IntersectionObserver(callback, options)

let target = document.querySelectorAll('section')
target.forEach(el => {
	observer.observe(el)
})