本文介绍使用 `getboundingclientrect()` 检测滚动容器中首个部分/完全不可见的子元素位置，适用于溢出隐藏（`overflow: hidden` 或 `auto`）场景，并提供可运行示例与边界处理要点。
在 Web 开发中，当一个固定高度容器（如 .container）内包含长列表且设置了 overflow: hidden（或 auto），常需动态识别当前视口外的第一个列表项——尤其在实现虚拟滚动、滚动锚定或懒加载时至关重要。核心思路是：将每个子元素的边界矩形（DOMRect）与容器可视区域底部对齐比较。
关键原理说明
- 使用 container.getBoundingClientRect().bottom 获取容器底边在视口中的绝对 Y 坐标；
- 减去下边框宽度（borderBottomWidth），确保计算基于内容区底部；
- 对每个子元素调用 elem.getBoundingClientRect()，获取其 top 和 bottom 值：
- 若 elem.top containerBottom → 元素部分可见（跨容器底边）；
- 若 elem.top > containerBottom → 元素完全不可见（位于容器下方）；
- 利用数组展开语法 [...container.children] 确保按 DOM 顺序遍历，find() 返回首个匹配项。
完整可运行示例
<div class="container">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
</div>
<div id="$partial"></div>
<div id="$full"></div>
<style>
.container {
border: 15px solid gray;
height: 70px;
overflow: auto; /* 注意：此处用 auto 便于演示滚动，hidden 同样适用 */
padding: 20px;
border-radius: 4px;
}
p {
border: 1px solid lightgray;
border-radius: 4px;
padding: 5px 10px;
margin: 4px 0;
}
.partial {
background: #fff9c4;
border-color: #ff8f00;
font-weight: bold;
}
</style>
<script>
const container = document.querySelector('.container');
const $partial = document.getElementById('$partial');
const $full = document.getElementById('$full');
// 获取容器内容区底部（扣除下边框）
const computedStyle = getComputedStyle(container);
const borderWidth = parseInt(computedStyle.borderBottomWidth) || 0;
const containerBottom = container.getBoundingClientRect().bottom - borderWidth;
let hiddenPartial;
function checkHidden() {
// 清除上一次高亮
hiddenPartial?.classList.remove('partial');
// 查找首个“部分可见”项（顶部在视口内，底部在视口外）
hiddenPartial = [...container.children].find(elem => {
const rect = elem.getBoundingClientRect();
return rect.top < containerBottom && rect.bottom > containerBottom;
});
if (hiddenPartial) {
hiddenPartial.classList.add('partial');
}
$partial.textContent = '首个部分隐藏项：' + (hiddenPartial?.textContent || '无');
// 查找首个“完全隐藏”项（顶部已超出容器底部）
const hiddenFull = [...container.children].find(elem => {
return elem.getBoundingClientRect().top > containerBottom;
});
$full.textContent = '首个完全隐藏项：' + (hiddenFull?.textContent || '无');
}
// 初始化检测 + 监听滚动
checkHidden();
container.addEventListener('scroll', checkHidden);
// 如需响应窗口缩放，可额外监听 resize（注意防抖）
</script>注意事项与优化建议
- ✅ 兼容性：getBoundingClientRect() 支持所有现代浏览器，包括 IE9+；
- ⚠️ 滚动方向限制：本方案仅处理垂直溢出；若存在水平滚动，需额外判断 left/right，但多数 UI 场景无需考虑；
- ⚠️ 性能提示：频繁滚动时，建议对 checkHidden 添加 requestAnimationFrame 节流或 debounce；
- ✅ 样式无关性：不依赖 position、transform 等可能影响 getBoundingClientRect() 的 CSS 属性（除非元素被 display: none 或 visibility: hidden）；
- ? 动态内容适配：若列表项动态增删，需重新执行 checkHidden()，或封装为响应式函数。
通过该方法，你不仅能准确定位首个溢出项，还可进一步扩展用于计算可视区域索引、滚动到指定项、或驱动虚拟列表渲染逻辑。
