JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li style="background-color: tomato">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
</ul>
<div id="rule"></div>

CSS

ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: block;
  height: 20vh;
  width: 60vw;
  background: lightgray;
  font-size: 20vh;
  text-align: center;
  margin: 2px;
}

JavaScript

console.clear()
window.addEventListener('load', function startup() {
 var options = {
    root: null, // null = viewport
    threshold: 1
  }
  var callback = function(entries, observer) { 

		entries.forEach(entry => {
      if (entry.target.textContent == '7') {
      	console.log(entry.target, entry.boundingClientRect.top)
        console.log(entry)
      }
    })


  };
  var observer = new IntersectionObserver(callback, options);

  document.querySelectorAll('li').forEach(el => observer.observe(el))
});