html

<p class="hoge" style="margin-top:1000px;">hoge</p>
<p class="hoge" style="margin-top:1000px;">hoge</p>
<p class="hoge" style="margin-top:1000px;">hoge</p>

JavaScript

const windowH = window.innerHeight;

window.addEventListener(
  "scroll",
  function () {
    if (document.querySelector(".hoge") != null) {
      const hoge = document.querySelectorAll(".hoge");
      hoge.forEach(function (elem, index) {
        const rect = elem.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const hogeTop = rect.top + scrollTop;
        if (scrollTop > hogeTop - windowH) {
          //スクロールトリガー通過後の処理を記述
          elem.style.transition = "1s";
          elem.style.color = "red";
          elem.classList.remove("hoge");
        }
      });
    }
  },
  { passive: true }
);