带overflow属性的容器内滚动时高亮导航链接方案

嘿，我来帮你搞定这个滚动高亮导航的问题！你遇到的offsetTop数值不变的情况，其实是对这个属性的理解有点偏差——咱们一步步拆解：

一、先搞懂为啥offsetTop没变化 #

offsetTop是元素相对于最近的定位父元素的固定偏移量，哪怕你的容器在滚动，元素在父容器里的位置根本没动，所以这个数值当然不会变啦！这不是你的代码问题，是这个属性的设计逻辑就是如此。

要判断容器内元素是否处于可视区域，得换一套计算逻辑：

二、正确计算容器内元素的可见性 #

对于可滚动容器内的元素，我们需要结合这几个核心属性来判断：

• contentWrapper.scrollTop：容器已经滚动的距离（顶部被隐藏的部分高度）
• contentWrapper.clientHeight：容器的可视区域高度（用户能看到的部分）
• section.offsetTop：元素相对于容器顶部的偏移（你的section直接放在main容器里，这个值是准确的）
• section.offsetHeight：元素自身的高度

判断逻辑可以自定义，比如你要的「元素顶部进入容器可视区域100px内就高亮」，或者更宽泛的「元素有任意部分在可视区域内就高亮」。

另外补充：Element.getBoundingClientRect()也能拿到元素相对于浏览器视口的位置，但如果你的容器不是占满整个视口的，计算起来反而麻烦，不如直接用容器内的偏移量更直接。

三、可滚动容器中位置会变化吗？ #

• offsetTop不会变：它是元素在父容器里的固定位置，和容器滚动无关
• 元素相对于容器可视区域的相对位置会变：比如元素距离容器可视区域顶部的距离，会随着滚动实时变化，这才是我们需要监听的关键

四、修改后的完整代码 #

我帮你补全了缺失的removeActiveNavClass函数，把wheel事件换成了覆盖所有滚动场景的scroll事件，还加了页面初始化高亮的逻辑：

document.addEventListener("DOMContentLoaded", function () {
  function refactorNavAnimation() {
    const sections = document.querySelectorAll(".refactor-section");
    const contentWrapper = document.querySelector(".listing-page-content");

    // 补全移除高亮类的函数
    function removeActiveNavClass() {
      document.querySelectorAll(".active-nav-link").forEach(link => {
        link.classList.remove("active-nav-link");
      });
    }

    // 用scroll事件替代wheel，覆盖滚轮、拖动滚动条等所有滚动场景
    contentWrapper.addEventListener("scroll", function() {
      const containerScrollTop = contentWrapper.scrollTop;
      const containerVisibleHeight = contentWrapper.clientHeight;

      sections.forEach(function (section) {
        const id = section.getAttribute("id");
        const activeSection = document.querySelector(`a[href='#${id}']`);
        if (!activeSection) return; // 避免找不到导航链接时报错

        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;

        // 自定义判断逻辑：元素顶部进入容器可视区域100px内，且元素未完全滚出容器
        const isVisible = (sectionTop <= containerScrollTop + 100) && 
                          (sectionTop + sectionHeight > containerScrollTop);

        if (isVisible) {
          removeActiveNavClass();
          activeSection.classList.add('active-nav-link');
        }
      });
    });

    // 页面加载时自动触发一次滚动事件，初始化高亮当前可见的章节
    contentWrapper.dispatchEvent(new Event('scroll'));
  }
  refactorNavAnimation();
});

额外优化小建议 #

如果滚动时页面有点卡，可以给scroll事件加个防抖，减少函数执行频率：

// 防抖函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 替换scroll事件的回调
contentWrapper.addEventListener("scroll", debounce(function() {
  // 原有的滚动判断逻辑
}));

内容的提问来源于stack exchange，提问作者monkeyshoulders