页面初始加载时已滚动，如何获取getBoundingClientRect的正确值

首先得明确：getBoundingClientRect().top 和 y 返回的是元素相对于当前视口顶部的距离，这是API的原生行为。你遇到的问题，本质是浏览器刷新后会自动恢复之前的滚动位置，此时视口的起始点已经不是文档顶部了，所以这些值看起来“不对”——但它们本身是准确的，只是你需要的应该是元素相对于文档顶部的固定绝对位置。

给你两个可行的解决思路：

1. 计算元素相对于文档顶部的绝对位置 #

把视口相对位置和当前页面的滚动距离相加，就能得到元素到文档顶部的固定值，不管页面怎么滚动、刷新，这个值都不会变：

const targetEl = document.getElementById('your-target-element');
const rect = targetEl.getBoundingClientRect();
// 绝对位置 = 视口相对位置 + 已滚动的距离
const absoluteTop = rect.top + window.scrollY;

2. 确保在滚动恢复完成后再计算 #

部分浏览器会在DOMContentLoaded触发后才完成滚动位置恢复，这时候直接获取window.scrollY可能还是0，导致计算错误。可以用requestAnimationFrame来等待滚动恢复完成：

function getAbsoluteTop(el) {
  const rect = el.getBoundingClientRect();
  return rect.top + window.scrollY;
}

// 页面完全加载后执行
window.addEventListener('load', () => {
  // 用requestAnimationFrame确保滚动状态已经更新
  requestAnimationFrame(() => {
    const fixedTop = getAbsoluteTop(document.getElementById('your-target-element'));
    console.log('元素相对于文档顶部的位置:', fixedTop);
  });
});

简单说，你要的不是视口相对值，而是文档绝对位置，通过上述方法就能得到稳定的结果。

内容的提问来源于stack exchange，提问作者Julian Laibach