スクロール検知　IntersectionObserver –

<section>
  <div class="child">Start where you are.</div>
</section>
section {
  position: relative;
  height: 300vh;
  background: linear-gradient(orange, pink);
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background-color: aqua;
}
const child = document.querySelector('.child');

const cb = function (entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('イン');
      // io.unobserve(entry.target);    初回だけ処理を実行する
    } else {
      console.log('アウト');
    }
  });
}

let options = {
  root: null,
  rootMargin: "-300px -300px",
  threshold: 1,
}

const io = new IntersectionObserver(cb, options);
io.observe(child);