本文介绍使用 `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() 返回首个匹配项。
完整可运行示例
注意事项与优化建议
- ✅ 兼容性：getBoundingClientRect() 支持所有现代浏览器，包括 IE9+；
- ⚠️ 滚动方向限制：本方案仅处理垂直溢出；若存在水平滚动，需额外判断 left/right，但多数 UI 场景无需考虑；
- ⚠️ 性能提示：频繁滚动时，建议对 checkHidden 添加 requestAnimationFrame 节流或 debounce；
- ✅ 样式无关性：不依赖 position、transform 等可能影响 getBoundingClientRect() 的 CSS 属性（除非元素被 display: none 或 visibility: hidden）；
- ? 动态内容适配：若列表项动态增删，需重新执行 checkHidden()，或封装为响应式函数。
通过该方法，你不仅能准确定位首个溢出项，还可进一步扩展用于计算可视区域索引、滚动到指定项、或驱动虚拟列表渲染逻辑。
