getBoundingClientRect 返回元素相对于视口的 DOMRect 对象，含 left、top、right、bottom、width、height 六个只读像素属性；需加 window.scrollX/Y 才得文档绝对坐标，滚动时应节流或用 requestAnimationFrame 更新。
getBoundingClientRect 获取的是元素相对于视口（viewport）的坐标，不是页面绝对位置，滚动时数值会变。要获得稳定坐标，得结合 window.scrollX/Y 或 pageXOffset/pageYOffset 补偿。
getBoundingClientRect 返回什么
调用 element.getBoundingClientRect() 返回一个 DOMRect 对象，含 left、top、right、bottom、width、height 六个只读属性，单位是像素，原点在视口左上角（不是文档左上角）。注意：top 和 left 是元素上边和左边到视口顶部/左侧的距离，为负值说明元素已滚出视口上方或左侧。
滚动时坐标会变，怎么拿到“固定位置”
如果需要元素相对于整个页面的静态坐标（比如做锚点定位、悬浮提示对齐），需把 getBoundingClientRect 的 top/left 加上当前滚动偏移：
- 页面横向滚动距离：window.scrollX 或 window.pageXOffset
- 页面纵向滚动距离：window.scrollY 或 window.pageYOffset
- 元素距文档左上角的真实 top 值 = rect.top + window.scrollY
- 元素距文档左上角的真实 left 值 = rect.left + window.scrollX
例如：const rect = el.getBoundingClientRect(); const absTop = rect.top + window.scrollY;
立即学习“Java免费学习笔记（深入）”；
滚动中实时更新坐标（防抖推荐）
监听 scroll 事件直接调用 getBoundingClientRect 效率低，容易触发频繁重排。建议用 requestAnimationFrame 或节流（throttle）控制频率：
- 用 requestAnimationFrame 包裹：scroll 事件里只设 flag，raf 中执行获取和更新逻辑
- 简单节流：用 setTimeout 记录上次执行时间，间隔 ≥ 16ms 再执行
- 现代写法可用 IntersectionObserver 替代部分场景（如判断是否进入视口），不依赖坐标计算
注意边界情况
某些布局下（如 transform 缩放、iframe 内嵌、CSS zoom）会影响 getBoundingClientRect 结果：
- 元素有 CSS transform（如 scale、translate）时，返回值已自动转换，无需额外处理
- 在 iframe 中调用，坐标基于该 iframe 视口，不是顶层窗口
- 元素被 display: none 或 visibility: hidden 时，rect 各值均为 0，但 offsetParent 可能为 null
- 元素未渲染（如刚 append 还没 layout）时，调用可能返回 0，可 await Promise.resolve().then(() => el.getBoundingClientRect()) 确保 layout 完成
