Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <style>
      #root {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 100px;
        height: 100px;
        background-color: yellow;
      }

      #d1 {
        position: absolute;
        left: -12px;
        top: 0px;
        width: 10px;
        height: 10px;
        background-color: blue;
      }

      #output {
        position: absolute;
        top: 160px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div id="d1"></div>
    </div>

    <pre id="output"></pre>
    <script>
      let output = document.getElementById("output");
      let d1 = document.getElementById("d1");

      function log(message) {
        output.textContent += message + '\n';
      }

      let obs = new IntersectionObserver(records => {
        if (records.lenth == 0)
          log("no records")
        else
          log(`record[0]: ${records[0].isIntersecting} (${records[0].intersectionRatio})`);
      }, { root: document.getElementById("root"), threshold: [.5] });
      obs.observe(d1);

      let d1pos = -11;
      function budge() {
        d1pos += 1;
        d1.style.left = `${d1pos}px`;
      }

      let ival = setInterval(() => {
        budge();
        if (d1pos > 10) {
          clearInterval(ival);
        }
      }, 100);
    </script>
  </body>
</html>