Javascript 如何在带有“的页面上创建导航元素？”；滚动间谍“；看得见的

我有一个导航，它是一个目录。我还有一个scroll spy（通过

IntersectionObserver

实现）

当您向下滚动内容时，一旦一个部分进入视图，导航中相应的链接就会突出显示

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const id = entry.target.getAttribute("id");
    if (entry.intersectionRatio > 0) {
      document
        .querySelector(`.js-nav-link[href="#${id}"]`)
        .classList.add("active");
    } else {
      document
        .querySelector(`.js-nav-link[href="#${id}"]`)
        .classList.remove("active");
    }
  });
});

document.querySelectorAll("div[id]").forEach((div) => {
  observer.observe(div);
});// Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const id = entry.target.getAttribute("id");
    if (entry.intersectionRatio > 0) {
      document
        .querySelector(`.js-nav-link[href="#${id}"]`)
        .classList.add("active");
    } else {
      document
        .querySelector(`.js-nav-link[href="#${id}"]`)
        .classList.remove("active");
    }
  });
});

document.querySelectorAll("div[id]").forEach((div) => {
  observer.observe(div);
});

代码沙箱：

一切都像预期的那样。但是，如果您通过的部分导航链接位于导航的末端，则链接将保持隐藏状态。（将浏览器调整为移动）

我想把它移到视野中

我尝试使用了

scrollIntoView（）

。它做了我想做的，但是它会弄乱链接的点击（这些部分不会再跳到顶部/或者变成小车，只在点击几下后才跳到正确的位置）

我还使用

getBoundingClientRect（）

给出了一个解决方案，但也没有成功

我该怎么办

// Doesn't work

const link = document.querySelector(`.js-nav-link[href="#${id}"]`);
link.scrollIntoView();
link.classList.add("active");