本文介绍如何利用 `getboundingclientrect()` 精确判断滚动容器中首个部分隐藏或完全隐藏的子元素位置，适用于溢出裁剪（`overflow: hidden/auto`）场景，并提供可运行的检测逻辑与样式反馈。
在 Web 开发中，当一个固定高度容器（如 .container）内包含多个子元素（如
列表项），且设置了 overflow: hidden 或 overflow: auto 时，部分内容会被裁剪不可见。此时若需动态识别“第一个不可见项”——即首个完全位于容器可视区域下方的元素，或首个被截断显示（顶部可见、底部超出） 的元素，关键在于精确比对元素边界与容器可视底边。
核心思路是：
✅ 获取容器自身的 getBoundingClientRect()，结合 border-bottom-width 和 padding-bottom（如有）计算其实际可视区域底边坐标（记为 containerBottom）；
✅ 遍历所有子元素，调用各自的 getBoundingClientRect()，提取 top 和 bottom 值；
✅ 判断逻辑分两类：
- 部分隐藏项：elem.top containerBottom（元素上边缘在视区内，下边缘已超出）；
- 完全隐藏项：elem.top > 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;
function checkHidden() {
// 清除上次高亮
document.querySelector('.partial')?.classList.remove('partial');
// 查找首个部分隐藏项
const 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 => {
const rect = elem.getBoundingClientRect();
return rect.top > containerBottom;
});
$full.textContent = '首个完全隐藏项：' + (hiddenFull?.textContent || '无');
}
// 初始化检测，并监听滚动（若容器可滚动）
container.addEventListener('scroll', checkHidden);
checkHidden(); // 首次执行? 注意事项：
- 若容器使用 overflow: hidden，则无滚动事件，需在 DOM 加载完成、布局稳定后手动调用 checkHidden()；若为 overflow: auto/scroll，则应绑定 scroll 事件；
- getBoundingClientRect() 返回的是相对于视口（viewport） 的坐标，因此该方案天然支持页面缩放、滚动位置变化，无需额外处理；
- 水平滚动条一般不影响垂直定位判断，但若存在 direction: rtl 或复杂嵌套布局，建议补充 getComputedStyle(container).paddingBottom 以提升精度；
- 性能敏感场景中，可考虑节流 scroll 事件，或使用 IntersectionObserver 替代频繁遍历（但后者无法精确区分“部分隐藏”与“完全隐藏”）。
通过该方法，你不仅能准确定位目标元素，还可结合 CSS 类（如 .partial）实现视觉反馈，为虚拟滚动、懒加载、锚点导航等高级交互提供底层支撑。
