移动端Safari点击返回按钮未恢复页面滚动位置的原因排查

一、核心问题根源 #

默认情况下Safari的历史记录会自动保存页面滚动位置，但部分用户出现异常，主要和以下因素相关：

1. Safari版本与BFCache（后退缓存）机制差异 #

• iOS 13及更早版本的Safari对BFCache支持存在bug：如果页面包含unload事件监听、或有异步脚本在页面卸载时执行，会直接触发页面重新加载而非从缓存恢复，滚动位置自然丢失。
• 新版iOS（14+）虽优化了BFCache，但如果页面存在beforeunload弹窗逻辑，或第三方脚本（如统计、广告）修改了页面状态，仍可能被踢出缓存。

2. 自定义滚动容器导致默认恢复失效 #

如果商品列表的滚动不是基于document.body/window，而是嵌套在自定义div容器（设置overflow: auto/scroll），Safari的默认scrollRestoration只会恢复全局滚动位置，不会处理自定义容器的滚动状态，需手动通过sessionStorage或历史记录状态保存/恢复。

3. 页面加载时的JS代码干扰 #

• 若页面在load或DOMContentLoaded事件中主动设置window.scrollTop = 0，或有初始化逻辑重置滚动位置，会覆盖Safari的默认恢复行为。
• 部分防抖/节流的滚动事件处理函数，在页面pageshow时误触发，也可能强制滚动到顶部。

4. 用户隐私设置与操作行为 #

• 用户开启了Safari的「阻止跨网站跟踪」或「清除历史记录与网站数据」，会禁用BFCache，导致返回时页面重新加载。
• 用户通过「在新标签页中打开」进入商品详情页，此时返回操作是关闭标签页而非历史回退，自然无法恢复原页面的滚动位置。

二、不同iPhone Safari用户行为差异的原因 #

1. iOS版本差异：旧版本系统（iOS 12及以下）的Safari对滚动恢复的兼容性远差于新版，bug触发概率更高。
2. 隐私设置不同：部分用户为了隐私安全关闭了网站缓存，直接导致BFCache失效。
3. 操作习惯差异：有的用户习惯新标签页打开链接，有的则在当前标签页跳转，两种操作的历史记录机制完全不同。
4. 网络环境影响：网络较差时，页面可能无法被存入BFCache，返回时需重新加载，滚动位置丢失；而你测试时网络稳定，页面能正常从缓存恢复。

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