本文介绍使用 `getboundingclientrect()` 检测滚动容器内首个部分或完全不可见列表项的精确位置，适用于溢出隐藏（`overflow: hidden`）或可滚动场景，并提供可运行示例与边界处理要点。
在 Web 开发中，当一个固定高度容器（如 .container）内包含长列表且设置了 overflow: hidden 或 overflow: auto 时，常需动态识别哪些列表项已超出可视区域——尤其是首个部分裁剪（top 可见、bottom 超出）或完全隐藏（top 已超过容器底部）的元素。这在实现虚拟滚动、滚动锚定、懒加载提示等交互中尤为关键。
核心思路是：通过 getBoundingClientRect() 获取容器底部基准线（需减去下边框宽度以保证精度），再遍历子元素，比对其 top 和 bottom 值与该基准线的关系：
- 部分可见项：满足 elem.top containerBottom，即元素上边缘在视口内、下边缘已溢出；
- 完全隐藏项：满足 elem.top > containerBottom，即整个元素已滑出容器可视区域底部。
以下为精简可靠的实现代码（兼容 overflow: hidden 和 overflow: auto）：
eMart 网店系统
下载
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
const container = document.querySelector('.container');
const $partial = document.getElementById('$partial');
const $full = document.getElementById('$full');
// 计算容器可视区域底部（排除 border-bottom 影响）
const computedStyle = getComputedStyle(container);
const borderWidth = parseInt(computedStyle.borderBottomWidth) || 0;
const containerRect = container.getBoundingClientRect();
const containerBottom = containerRect.bottom - borderWidth;
function checkHidden() {
// 清除上一次高亮
document.querySelector('.partial')?.classList.remove('partial');
// 查找首个部分裁剪项
const hiddenPartial = [...container.children].find(elem => {
const { top, bottom } = elem.getBoundingClientRect();
return top < containerBottom && bottom > containerBottom;
});
hiddenPartial?.classList.add('partial');
$partial.textContent = `首个部分隐藏项：${hiddenPartial?.textContent || '无'}`;
// 查找首个完全隐藏项
const hiddenFull = [...container.children].find(elem => {
return elem.getBoundingClientRect().top > containerBottom;
});
$full.textContent = `首个完全隐藏项：${hiddenFull?.textContent || '无'}`;
}
// 初始检测 + 滚动监听（若容器可滚动）
if (container.scrollHeight > container.clientHeight) {
container.addEventListener('scroll', checkHidden);
}
checkHidden(); // 立即执行一次? 注意事项：
- 若容器使用 overflow: hidden，则无法触发 scroll 事件，此时应改用 ResizeObserver 监听容器尺寸变化，或在 DOM 更新后主动调用 checkHidden()；
- getBoundingClientRect() 返回的是相对于视口的坐标，不受页面滚动影响，因此适用于所有布局场景；
- 水平滚动（overflow-x: auto）通常不影响垂直隐藏判断，但若存在横向滚动条导致容器可用高度变化，需额外减去滚动条高度（container.offsetHeight - container.clientHeight）；
- 为提升性能，对长列表建议加防抖（debounce），或仅在必要时（如用户滚动结束、数据更新后）重新计算。
该方法不依赖第三方库，原生可靠，精准度高，是现代前端处理可视区域感知问题的推荐实践。
