Chrome浏览器中网站重载后自动跳转非原浏览位置问题咨询

诱发原因 #

该问题90%以上的场景和Chrome自带的*滚动恢复（Scroll Restoration）*机制与动态渲染页面的时序冲突相关，核心触发逻辑如下：

• Chrome默认开启history.scrollRestoration = auto，重载页面时会自动尝试恢复上一次的滚动位置，但计算滚动位置的时机是页面初始DOM解析完成时，不会等待异步内容加载完成
• 如果你的站点存在懒加载图片、异步渲染的动态区块（比如接口返回后才渲染的目录、结论内容）、无提前占位的动态插入组件，初始DOM解析完成时的页面高度远小于最终渲染完成的高度，浏览器恢复的初始滚动位置在后续内容撑开页面后就会发生偏移，出现无规律跳转的现象
• 只有处于页面最底部时重载不会出问题，是因为滚动到最底部的判定逻辑是scrollTop = scrollHeight - clientHeight，即使后续内容加载增加了页面总高度，浏览器也会自动维持在最底部的位置，不会发生偏移
• 少数场景是页面存在未做时序控制的滚动修改逻辑：比如全局load事件中绑定的导航定位、埋点采集逻辑，和浏览器的滚动恢复逻辑执行顺序冲突，导致滚动位置被覆盖

解决方法 #

快速验证根因 #

打开控制台执行以下代码，禁用浏览器默认滚动恢复后重载页面测试，如果问题消失即可确认是滚动恢复机制导致：

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

针对性修复方案 #

• 若不需要保留滚动恢复能力：直接在页面初始化逻辑中加入上面的代码，永久关闭浏览器自动滚动恢复即可
• 若需要保留滚动恢复能力：
  1. 给所有动态内容提前设置高度占位：懒加载图片统一声明width/height属性，异步渲染的目录、结论等固定区块提前在HTML中写入占位容器并设置固定高度，保证页面初始高度和最终渲染完成的高度一致
  2. 调整动态内容插入时序：所有核心内容的异步渲染逻辑尽量在DOMContentLoaded事件触发前完成，避免浏览器恢复滚动位置后再插入内容撑开页面
  3. 自定义滚动恢复逻辑覆盖默认行为：页面卸载前将当前滚动位置存入sessionStorage，等页面所有内容（包括异步资源、动态组件）全部渲染完成后，手动调用window.scrollTo恢复到存储的滚动位置
  4. 排查所有全局绑定的scroll、load、DOMContentLoaded事件回调，移除不必要的主动修改滚动位置的逻辑，必要的逻辑增加延迟执行配置，等页面渲染稳定后再执行

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