JSFiddle - React, Tailwind, and code Playground

by Scott

HTML

<script src="https://cdn.rawgit.com/w3c/IntersectionObserver/gh-pages/polyfill/intersection-observer.js"></script>
<div id="last"></div>
<div class="wrapper">
  <div id="parent"></div>
</div>

SCSS

body {
  overflow-y: hidden;
}

.wrapper {
  background:#E7ECF5;
  border: 2px solid #02E4FF;
  padding: 2em;
}

#parent {
  height: 350px;
  overflow-y: scroll;

  div {
    padding: 0.5em;
    background: #fff;
    border: 1px solid #F6A6FF;
    border-bottom: 0;
  }
}

#last {
   position: absolute;
  top: 20px;
  right: 20px;
  background: #465466;
  border-radius: 4px;
  box-shadow: 0px 2px 28px 0px rgba(0,0,0,0.25);
  color: white;
  padding: 1em;
}

JavaScript

(function(last, parent) {
  const observer = new IntersectionObserver((entries) => {
    entries
      .forEach(entry => {
      	console.log(entry.target.id, entry.intersectionRatio);
        last.innerHTML = entry.target.id + ': ' + entry.isIntersecting
      });
  }, {
    root: parent,
    threshold: 1.0
  });

  for (let i = 1; i <= 100; i++) {
    const child = document.createElement('div');
    child.id = String(i);
    child.innerHTML = child.id;
    parent.appendChild(child);

    observer.observe(child);
  }
})(document.getElementById('last'), document.getElementById('parent'));