getBoundingClientRect() 返回元素相对于视口左上角的 DOMRect 对象，含 top/left/right/bottom/width/height 六属性，自动适配滚动、缩放与 CSS 变换，坐标以视口为原点，单位为 CSS 像素。
getboundingclientrect() 是获取元素相对于当前视口（viewport）左上角的精确位置和尺寸的核心方法，返回一个 domrect 对象，包含 top、left、right、bottom、width、height 六个只读属性。它天然考虑滚动偏移、缩放、css 变换（部分情况）、边框与内边距，无需手动计算 window.scrollx/y。
理解返回值的坐标基准
所有坐标值（top/left/right/bottom）均以**当前视口左上角为原点**（0, 0），单位为 CSS 像素：
-
top：元素上边界到视口顶部的距离（可能为负，表示元素已滚出视口上方） -
left：元素左边界到视口左侧的距离（可能为负，表示元素在视口左侧外） -
right=left + width，bottom=top + height -
width和height是元素在视口中的实际渲染宽高（含 border 和 padding，不含 margin）
判断元素是否在视口内（可见性检测）
利用 top、bottom、left、right 与视口尺寸比较即可，无需依赖 offsetTop 或 scrollTop：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 完全可见：
rect.top >= 0 && rect.left >= 0 && rect.bottom - 部分可见（常用）：
rect.top 0 && rect.left 0 - 注意：使用
window.innerHeight/window.innerWidth而非document.documentElement.clientHeight，因前者更准确反映可视区域（排除地址栏等影响）
处理滚动、缩放与 CSS 变换的影响
getBoundingClientRect() 默认已自动适配大多数动态场景：
-
滚动：结果实时反映当前滚动位置，无需加减
window.scrollX/Y - 页面缩放（Ctrl+/-）：返回值会随缩放比例变化，保持物理像素精度
-
CSS transform：支持
translate、scale、rotate等，返回的是变换后在视口中的最终布局矩形 -
不适用场景：元素被
overflow: hidden父容器裁剪时，getBoundingClientRect()仍返回元素自身完整矩形，不会被裁剪 —— 如需“可见部分”，需手动与父容器 rect 求交集
实用技巧与注意事项
- 调用前确保元素已挂载且完成布局（避免在
useEffect或DOMContentLoaded后执行，避开 SSR 或未渲染状态） - 高频调用（如 scroll 事件中）建议防抖或使用
IntersectionObserver替代，避免强制同步布局（layout thrashing） - 获取相对于文档顶部的位置？可叠加
window.scrollY + rect.top，但注意这仅适用于无 transform 的常规流式布局 - 想排除 border/padding 影响？用
rect.width - parseFloat(getComputedStyle(el).borderLeftWidth) - ...手动减去，但通常getBoundingClientRect()返回的就是你需要的“视觉占位”尺寸
