仅在交叉点观察者检测到真假时添加滚动事件侦听器触发一次

Question

我尝试仅使用 JS 来制作视差效果，并且成功控制了一个部分。 现在我试图让它在一个页面上的多个部分上工作，我不明白为什么。

问题是滚动事件侦听器仅触发一次，当交叉点观察者检测到真或假时。 我想只使用addEventListener()可以工作，但我通过使用IntersectionObserver()来使用更少的资源。

这是我正在处理的代码。

<style>
.placeholder {
  width:100%;
  height: 150vh;
  background: royalblue;

.divider {
  height: 70vh;
  background: rosybrown;

.para-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url('https://picsum.photos/1280/720');
  background-size: 100%;
  background-position: 50% 50%;
</style>

<header class="placeholder">Header</header>

<section class="para-section">
  <div class="para-content">Parallax Moving</div>
</section>

<div class="divider">Divider</div>

<section class="para-section">
  <div class="para-content">Parallax Moving</div>
</section>

<footer class="placeholder">Footer</footer>

此 JS 代码适用于一个元素，但不适用于多元素。
（我在添加，删除evert监听器方面做得对吗？也很好奇^^;）

const paraSection = document.querySelectorAll(".para-section");

const options = { rootMargin: "-100px" };

const paraObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      window.addEventListener("scroll", parallaxScroll(entry.target));
      console.log("ON");
    } else {
      window.removeEventListener("scroll", parallaxScroll(entry.target));
      console.log("OFF");
    }
  });
}, options);

paraSection.forEach((element) => {
  paraObserver.observe(element);
});

// transform controll
const increment = -0.5;

const parallaxScroll = (element) => {
  let centerOffest = window.scrollY - element.offsetTop;
  let yOffsetRatio = centerOffest / element.offsetHeight;

  console.log(yOffsetRatio);

  let yOffset = 50 + yOffsetRatio * 100 * increment;
  element.style.backgroundPositionY = `${yOffset}%`;
};

如果您有更好的方法，欢迎提出任何建议。

谢谢