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向下滚动但不向上滚动

1 个答案: