element.getboundingclientrect() 返回元素在视口中的相对位置，含 left、top、right、bottom、width、height 六个只读像素值属性；left/top 相对于视口左上角，随滚动变化；需加 pagexoffset/pageyoffset 转换为文档坐标；不可见元素宽高为0，裁剪不影响结果，transform 会影响尺寸计算。
element.getboundingclientrect() 是获取元素在视口（viewport）中相对位置的核心方法，返回一个 domrect 对象，包含 left、top、right、bottom、width、height 六个只读属性，单位均为像素。
基础用法：直接调用并读取坐标
只需对任意 DOM 元素调用该方法即可：
const el = document.querySelector('#myBox');
const rect = el.getBoundingClientRect();
console.log(rect.left); // 元素左边缘距视口左边缘的距离
console.log(rect.top); // 元素上边缘距视口上边缘的距离
console.log(rect.width); // 元素宽度（含 border 和 padding，不含 margin）
console.log(rect.height); // 元素高度（同上）
注意：left 和 top 是相对于当前可视区域左上角的值，**不是相对于页面顶部或文档左端**。滚动时它们会实时变化。
获取相对于整个文档的位置（兼容滚动）
如果需要固定不变的“页面坐标”（例如做定位计算、拖拽锚点），需加上滚动偏移：
pageX = rect.left + window.pageXOffsetpageY = rect.top + window.pageYOffset
更稳妥写法（兼容 IE）：
const { left, top } = el.getBoundingClientRect();
const pageX = left + (window.pageXOffset || document.documentElement.scrollLeft);
const pageY = top + (window.pageYOffset || document.documentElement.scrollTop);
常见注意事项和边界情况
- 元素不可见（
display: none）时，返回的width/height为0，left/top可能为0或异常值；visibility: hidden不影响结果 - 元素被裁剪（如父容器
overflow: hidden）时，getBoundingClientRect()仍返回元素自身的完整尺寸和原始位置，不反映可见部分 - 缩放（
transform: scale()）会影响width/height，但left/top仍是变换后左上角在视口中的位置 - 返回对象是实时快照，不是响应式绑定——后续 DOM 变化不会自动更新它，需重新调用
实用小技巧：快速判断是否在视口内
利用 top、bottom、left、right 与视口尺寸比较：
function isInViewport(el) {
const r = el.getBoundingClientRect();
return (
r.top >= 0 &&
r.left >= 0 &&
r.bottom
<p>此判断仅表示元素完全在视口内；若只需“部分可见”，可改为 <code>r.top 0 && ...</code> 等逻辑。</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
