本文介绍如何利用 `getboundingclientrect()` 精确判断滚动容器中首个被截断或完全隐藏的列表项，并动态标记其状态，适用于无限加载、虚拟滚动等场景。
在 Web 开发中，当一个固定高度的容器（如 .container）内包含长列表且设置了 overflow: hidden（或 auto）时，常需识别哪些列表项已超出可视区域——尤其是首个部分可见（顶部在视口内、底部超出容器底边）或完全不可见（整个元素位于容器底部之下）的元素。这在实现虚拟滚动、懒加载、滚动锚定或高亮“临界项”等交互逻辑中至关重要。
核心思路是：获取容器的可视区域底部坐标（考虑边框、padding 等影响），再遍历子元素，通过 getBoundingClientRect() 获取每个元素相对于视口的 top 和 bottom 值，与容器底部进行比较：
- ✅ 部分隐藏项：满足 elem.top containerBottom
→ 元素上边缘在容器内，下边缘已溢出，即被截断的第一项； - ✅ 完全隐藏项：满足 elem.top > containerBottom
→ 整个元素位于容器可视区域下方，是首个完全不可见项。
注意：getBoundingClientRect() 返回的是相对于当前视口的坐标，因此无需手动处理页面滚动偏移，天然适配滚动容器（即使容器自身可滚动）。但需谨慎处理容器的 border-bottom-width 和 padding-bottom —— 示例中通过 getComputedStyle(container).borderBottomWidth 提取边框宽度并从 container.getBoundingClientRect().bottom 中减去，确保 containerBottom 精确对应内容区底部边界。
以下是精简可靠的实现代码：
const container = document.querySelector('.container'); const $partial = document.getElementById('$partial'); const $full = document.getElementById('$full'); // 计算容器内容区底部坐标（排除下边框） const style = getComputedStyle(container); const borderBottom = parseInt(style.borderBottomWidth) || 0; const containerBottom = container.getBoundingClientRect().bottom - borderBottom; let hiddenPartial; function checkHidden() { // 清除上一次标记 hiddenPartial?.classList.remove('partial'); // 查找首个被截断的元素（部分可见） hiddenPartial = [...container.children].find(elem => { const rect = elem.getBoundingClientRect(); return rect.top < containerBottom && rect.bottom > containerBottom; }); hiddenPartial?.classList.add('partial'); $partial.textContent = '首个部分隐藏项：' + (hiddenPartial?.textContent || '无'); // 查找首个完全隐藏的元素 const hiddenFull = [...container.children].find(elem => elem.getBoundingClientRect().top > containerBottom ); $full.textContent = '首个完全隐藏项：' + (hiddenFull?.textContent || '无'); } // 初始化 + 监听滚动（若容器可滚动） container.addEventListener('scroll', checkHidden); checkHidden(); // 首次执行? 关键注意事项：
- 若容器使用 overflow: hidden，则无原生滚动事件，需改用 resize 或 MutationObserver 配合定时检测（因 dom 变化可能改变布局）；
- 水平滚动（overflow-x: auto）通常不影响垂直位置判断，但若存在横向滚动条，会压缩容器宽度，间接影响 getBoundingClientRect() 的 left/right 值——本例聚焦垂直方向，可忽略；
- 为提升性能，避免在高频滚动中重复遍历大量子节点，生产环境建议结合节流（throttle）或 IntersectionObserver 替代轮询（尤其适用于长列表）；
- 所有元素必须已渲染完成（确保 DOM 加载完毕后再执行逻辑）。
该方法轻量、兼容性好（支持 IE9+），不依赖框架，可直接集成至 vue/react 项目中作为工具函数，是精准控制可视区域边界的实用基础方案。