如何定位容器中首个不可见列表项的位置

本文介绍使用 `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）：

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），或仅在必要时（如用户滚动结束、数据更新后）重新计算。

该方法不依赖第三方库，原生可靠，精准度高，是现代前端处理可视区域感知问题的推荐实践。