可利用sessionstorage在页面刷新或返回时自动恢复滚动位置，核心是监听滚动事件保存位置并在加载后读取应用；需防抖保存、加载后恢复并清除键值，spa中结合路由钩子处理，注意浏览器原生滚动记忆冲突及自定义容器适配。
可以利用 sessionStorage 在页面刷新或返回时自动恢复滚动位置，核心是监听滚动事件保存位置，并在页面加载后读取并应用。
监听页面滚动并保存位置
在用户滚动时，实时记录当前滚动容器（通常是 window）的垂直偏移量：
- 使用
window.addEventListener('scroll', ...)监听全局滚动 - 每次触发时，调用
sessionStorage.setItem('scrollY', window.scrollY) - 建议加防抖（如 100ms 延迟写入），避免频繁操作影响性能
页面加载后恢复滚动位置
在 DOM 加载完成（如 DOMContentLoaded）或 Vue/React 的 mounted 阶段执行：
- 读取
const savedY = sessionStorage.getItem('scrollY') - 若存在有效数值（非
null、非'null'、且为数字），调用window.scrollTo(0, parseInt(savedY)) - 注意：恢复后建议清除该值（
sessionStorage.removeItem('scrollY')），避免跨页面干扰；或仅在特定页面逻辑中使用
处理单页应用（SPA）路由切换
在 Vue Router 或 React Router 中，需在路由离开前保存、进入后恢复：
- Vue：在
beforeRouteLeave或beforeEach中保存；在mounted或activated中恢复 - React：用
useEffect监听 location 变化，在卸载前保存，在挂载后恢复 - 可为不同路径单独保存，例如键名为
scrollY_${location.pathname}
兼容性与注意事项
sessionStorage 本身兼容所有现代浏览器，但要注意：
- 页面通过
history.back()或浏览器前进/后退按钮返回时，scrollY可能已被浏览器原生记忆，此时手动恢复可能冲突——可先检测window.scrollY === 0再决定是否恢复 - 若页面有自定义滚动容器（如
div.overflow-y-auto），需监听其scrollTop并存取，而非window.scrollY - 不支持跨标签页共享，符合“会话级”语义，无需额外清理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
