JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-div">
  <div id="block-text">
    <span>I am main div</span>
  </div>
  <div id="box">
    <span>I am box</span>
  </div>
</div>

CSS

#main-div {
  background-color: red;
  height: 50px;
  overflow-y: scroll;
}

#block-text {
  height: 100%;
  background-color: green;
}

#box {
  background-color: yellow;
}

JavaScript

$(document).ready(function() {

  function my_callback(entries, observer) {
    if(entries[0].intersectionRatio == 1) {
      alert("I am visible!");
    }
  };

  var options = {
    root: $("#main_div")[0],
    threshold: 1.0
  };

  var observer = new IntersectionObserver(my_callback, options);

  observer.observe($("#box")[0]);
});