IntersectionObserver 向下滚动但不向上滚动

Question

我正在使用 IntersectionObserver 来突出显示当前部分的相应导航项。除非我向上滚动，否则一切似乎都工作正常。当我这样做时，我刚刚离开的部分得到 isIntersecting: false（应该如此），但我刚刚输入的部分没有被观察到。为向上滚动创建一个新的 IntersectionObserver 似乎是多余的而且是错误的，但我不知道如何使代码在两个滚动方向上工作。

非常感谢您的宝贵帮助！

这是 JS：

const sections = document.querySelectorAll(".section");
const config = {
  rootMargin: "0px 0px -51%",
};

let observer = new IntersectionObserver(function (entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      intersectionHandler(entry);
    }
  });
}, config);

sections.forEach((section) => {
  observer.observe(section);
});

function intersectionHandler(entry) {
  const id = entry.target.id;
  const currentlyActive = document.querySelector("#nav a.is-selected");
  const shouldBeActive = document.querySelector(
    "#nav a[data-section=" + id + "]"
  );

  if (currentlyActive) {
    currentlyActive.classList.remove("is-selected");
  }
  if (shouldBeActive) {
    shouldBeActive.classList.add("is-selected");
  }
}

Answer 1

您将底部边距设置为 -51px，因此当您“向上滚动”时，API 在确定交叉点之前从视口底部连续移除 51px。然后，假设下一个 <section> 出现，并计算出一个新的交叉点 - 同样，51px 在底部下方。您应该使用阈值 API 功能而不是设置负边距。

IntersectionObserver 向下滚动但不向上滚动

IntersectionObserver working scrolling down but not scrolling up

javascript

scroll

intersection-observer