getBoundingClientRect() 返回元素相对于视口左上角的只读坐标对象，含 top/left/right/bottom/width/height（像素），受缩放、transform 影响；滚动时值变化，需加 pageXOffset/pageYOffset 得页面绝对坐标。
用 getBoundingClientRect() 方法就能准确获取元素相对于当前视口（viewport）左上角的绝对坐标，返回对象包含 top、left、right、bottom、width、height 等属性，单位是像素。
getBoundingClientRect() 返回的是视口坐标，不是页面坐标
这个方法的值始终以浏览器可视区域（即你当前看到的窗口）左上角为原点（0, 0），不随页面滚动而改变。即使元素在视口外，返回的 top 或 left 也可能是负数或大于视口尺寸。
- 滚动页面时，同一元素多次调用该方法，
top/left值会变化 - 它自动考虑了缩放（zoom）、CSS transform、border-box 等渲染影响
- 返回的对象是只读的，不可修改
如何获取元素在完整页面中的绝对偏移（含滚动距离）
如果需要“相对于整个文档顶部左角”的坐标（比如做定位计算或与 pageYOffset 配合），可以手动加上滚动偏移：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
const rect = element.getBoundingClientRect(); const pageX = rect.left + window.pageXOffset; const pageY = rect.top + window.pageYOffset;
注意：window.pageXOffset 和 window.pageYOffset 在所有现代浏览器中都可用，兼容性优于 document.documentElement.scrollTop（IE 中可能不准）。
立即学习“Java免费学习笔记（深入）”；
常见误区和注意事项
- 不要用
offsetTop/offsetLeft：它们是相对于最近的 定位祖先元素，不是视口，且不包含滚动偏移 - 元素未渲染（如
display: none或未插入 DOM）时，getBoundingClientRect()返回全为 0 的矩形 - 若元素被父容器裁剪（
overflow: hidden），不影响该方法结果——它仍返回元素自身的几何边界 - 响应式布局中，建议在重排（reflow）后调用，例如放在
requestAnimationFrame里确保获取最新位置
简单封装一个安全获取视口坐标的函数
可加一层判断，避免元素不存在或未挂载：
function getViewportRect(el) {
if (!el || !el.getBoundingClientRect) return null;
try {
return el.getBoundingClientRect();
} catch (e) {
return null;
}
}
// 使用
const rect = getViewportRect(document.getElementById('my-btn'));
if (rect) {
console.log(`距视口左: ${rect.left}px, 距视口顶: ${rect.top}px`);
} 
