<div class="wrapper">
  <p class="text-2xl text-center">スクロールしてね<br>↓↓↓↓↓↓↓</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="sample-box flex justify-center items-center w-80 h-40 mx-auto py-4 text-2xl font-bold text-center text-white duration-500 text1">背景色が変わる</div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p class="text-2xl text-center">↑↑↑↑↑↑↑<br>スクロールしてね</p>
</div>

.wrapper {
  width: 100%;
  height: 100vh;
  padding: 48px 0;
  background-color: #ececec;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sample-box{
  background-color: #003e92;
  
  &.is-active{
    background-color:#f11717;
  }
}

const change_bgColor_animation = () => {
  const boxes = document.querySelectorAll(".sample-box");

  const options = {
    root: document.querySelector(".wrapper"),
    rootMargin: "-20% 0px",
    threshold: 0
  };

  const observer = new IntersectionObserver(callback, options);

  boxes.forEach((box) => {
    observer.observe(box);
  });

  // 要素が表示されたら実行する動作
  function callback(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-active");
      }else{
        entry.target.classList.remove("is-active");
      }
    });
  }
};

change_bgColor_animation();