突出显示滚动条上的侧栏导航项与IntersectionObserver进行反应时出现问题

Question

我正在处理一个react项目，我想在滚动时看到相应部分时突出显示边栏导航列表，我使用useEffect和IntersectionObserver，并使用下面的代码向边栏导航项添加一个活动类。

问题是一些部分不是视口的100%高度，导致多个侧边栏导航列表项同时突出显示，我不希望这样。我希望只有一个单一的导航项目有活动类。

 useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const id = entry.target.getAttribute('id');

        if (entry.isIntersecting) {
          document
            .querySelector(`.sidebarList li a[href="#${id}"]`)
            .classList.add('active');
        } else {
          document
            .querySelector(`.sidebarList li a[href="#${id}"]`)
            .classList.remove('active');
        }
      });
    });

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

    return () => observer.disconnect();
   });

Answer 1

我认为您将不得不使用useRef而不是使用您的querySelector。