为何单个section进入视口时不高亮，其余区块正常？

问题描述 #

开发了一个包含多个<section>标签的网页，需求是当section进入视口时添加active-section类实现高亮效果。目前大部分section正常工作，但有一个区块始终无法触发高亮。

核心原因分析 #

1. 视口可见性判断逻辑过于严格 #

当前isVisible函数要求元素完全处于视口内才返回true：

return (
    rect.top >=0 &&
    rect.left>=0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);

如果目标section的高度超过视口高度（比如长内容的About区块），它永远无法完全进入视口，自然不会触发高亮。

2. HTML存在无效闭合标签 #

在提供的HTML代码中，#team section后存在两个多余的</div>标签：

</section>
      
            </div>
        </div>
        <section class="page-section" id="contact">

这会导致DOM结构异常，可能影响元素的位置计算或选择器匹配。

修复方案 #

方案1：调整视口可见性判断逻辑 #

将isVisible函数修改为元素部分进入视口即判定为可见，这是更符合实际需求的逻辑：

const isVisible = (section) => {
    const rect = section.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    // 只要元素有部分在视口内就返回true
    return (
        rect.top < windowHeight &&
        rect.left < windowWidth &&
        rect.bottom > 0 &&
        rect.right > 0
    );
}

方案2：修复HTML无效标签 #

删除#team section后的多余闭合标签，修正后的结构如下：

</section>
        <section class="page-section" id="contact">

额外优化：添加页面加载时的初始化检测 #

当前代码只在滚动时触发检测，建议在页面加载完成后也执行一次，确保初始可见的section能正确高亮：

// 页面加载完成后执行一次
window.addEventListener('load', () => {
    addCSSActiveState(sections);
});

验证方法 #

• 打开浏览器开发者工具，选中目标section，查看getBoundingClientRect()的返回值，确认当前判断逻辑是否能匹配
• 检查DOM结构，确保没有未闭合或多余的标签
• 修改后滚动页面，观察目标section是否能正常添加active-section类

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