本文介绍如何利用 `getboundingclientrect()` 精确判断滚动容器中首个被截断或完全隐藏的列表项，并动态标记其状态，适用于无限加载、虚拟滚动等场景。
在 Web 开发中，当一个固定高度的容器（如 .container）内包含长列表且设置了 overflow: hidden（或 auto）时，常需识别哪些列表项已超出可视区域——尤其是首个部分可见（顶部在视口内、底部超出容器底边）或完全不可见（整个元素位于容器底部之下）的元素。这在实现虚拟滚动、懒加载、滚动锚定或高亮“临界项”等交互逻辑中至关重要。
核心思路是：获取容器的可视区域底部坐标（考虑边框、padding 等影响），再遍历子元素，通过 getBoundingClientRect() 获取每个元素相对于视口的 top 和 bottom 值，与容器底部进行比较：
- ✅ 部分隐藏项：满足 elem.top containerBottom
→ 元素上边缘在容器内，下边缘已溢出，即被截断的第一项； - ✅ 完全隐藏项：满足 elem.top > containerBottom
→ 整个元素位于容器可视区域下方，是首个完全不可见项。
注意：getBoundingClientRect() 返回的是相对于当前视口的坐标，因此无需手动处理页面滚动偏移，天然适配滚动容器（即使容器自身可滚动）。但需谨慎处理容器的 border-bottom-width 和 padding-bottom —— 示例中通过 getComputedStyle(container).borderBottomWidth 提取边框宽度并从 container.getBoundingClientRect().bottom 中减去，确保 containerBottom 精确对应内容区底部边界。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
以下是精简可靠的实现代码：
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;
let hiddenPartial;
function checkHidden() {
// 清除上一次标记
hiddenPartial?.classList.remove('partial');
// 查找首个被截断的元素（部分可见）
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 =>
elem.getBoundingClientRect().top > containerBottom
);
$full.textContent = '首个完全隐藏项：' + (hiddenFull?.textContent || '无');
}
// 初始化 + 监听滚动（若容器可滚动）
container.addEventListener('scroll', checkHidden);
checkHidden(); // 首次执行? 关键注意事项：
- 若容器使用 overflow: hidden，则无原生滚动事件，需改用 resize 或 MutationObserver 配合定时检测（因 DOM 变化可能改变布局）；
- 水平滚动（overflow-x: auto）通常不影响垂直位置判断，但若存在横向滚动条，会压缩容器宽度，间接影响 getBoundingClientRect() 的 left/right 值——本例聚焦垂直方向，可忽略；
- 为提升性能，避免在高频滚动中重复遍历大量子节点，生产环境建议结合节流（throttle）或 IntersectionObserver 替代轮询（尤其适用于长列表）；
- 所有元素必须已渲染完成（确保 DOM 加载完毕后再执行逻辑）。
该方法轻量、兼容性好（支持 IE9+），不依赖框架，可直接集成至 Vue/React 项目中作为工具函数，是精准控制可视区域边界的实用基础方案。
