対象のコンテンツが画面内に入った時にアクションを起こす方法です。

(() => {
  const element = document.getElementById('scroll-action');
  const observer = new IntersectionObserver((entries) => {
    for (const e of entries) {
      if (e.isIntersecting) {
        // 画面内の時の処理
        element.classList.add("-action");
      } else {
        // 画面外の処理
        element.classList.remove("-action");
      }
    }
  });
  observer.observe(element);
})();

上のコードはscroll-actionコンテンツが画面内に入ると-actionクラスを追加、画面外で削除してアニメーションを起こしています。似たものでaddEventListener()メソッドの"scroll"イベントがありますが、あちらはスクロールするたびに処理が走るので、こっちのほうが、パフォーマンスがいいです。

参考