关键在于主动存取滚动位置并延迟恢复:离开前用beforeunload等存scrollTop,返回后等DOM就绪再scrollTo,并通过navigation.type或时间戳判断是否为返回行为,所有storage操作需try/catch兜底。

关键不是让浏览器“自动记住”,而是你主动存、精准取、延迟恢复。sessionStorage 本身不保存滚动位置,它只提供一个会话级的存储容器;真正起作用的是你在合适时机读写 scrollTop,并在 DOM 真实就绪后执行 scrollTo。
离开前:用 beforeunload 或路由守卫存位置
用户点击跳转前,必须把当前滚动偏移量存下来。推荐用 beforeunload 事件,兼容性好、触发稳定:
- 以 路径为 key 后缀,比如
scrollPos-/list,避免多页互相覆盖 - 存
window.scrollY或document.documentElement.scrollTop,别用document.body.scrollTop(旧版 IE 兼容写法已过时) - Vue 中可在
beforeRouteLeave或deactivated钩子中存;React 中放在useEffect清理函数里
返回时:等 DOM 真正撑开再滚动
页面刚加载完,DOM 往往还没渲染完毕——图片未加载、懒加载模块未挂载、骨架屏还在占位。此时 scrollTo 会滚错位置:
使用 Playwright 为 jimeng.jianying.com 管理浏览器会话,导入 cookies/localStorage 以自动化视频生成工作流,支持图片上传等功能
- 监听 DOMContentLoaded 或 load 事件作为起点
- 加 setTimeout(..., 50) 或 requestIdleCallback,确保布局稳定
- 若列表支持无限滚动(如 van-list),需先加载足够数据使容器高度 ≥ 原来位置,再设置
scrollTop
防误恢复:只对“返回”行为生效
用户从首页点进来、或手动刷新,都不该恢复滚动——否则会莫名其妙卡在中间:
- 用
performance.getEntriesByType('navigation')[0]?.type === 'back_forward'判断是否为浏览器返回 - 更轻量做法:离开前记时间戳,返回时检查
document.visibilityState === 'visible'且距上次离开很短 - 非返回场景直接忽略 sessionStorage 中的值,不调用
scrollTo
兜底与兼容:别让异常中断体验
部分 iOS 隐私模式、老旧 WebView 或禁用 storage 的环境会抛出错误:
- 所有
setItem和getItem必须包裹 try/catch - 捕获
SecurityError、QuotaExceededError等,失败即跳过,不影响主流程 - 移动端注意:iOS Safari 在某些隐私设置下会清空 sessionStorage,可降级为内存缓存临时记录










