滚动条位置记录应采用节流控制，仅在滚动稳定时保存一次，避免高频写入；结合 visibilitychange 事件和可选防抖兜底提升可靠性；恢复时在 DOMContentLoaded 或 pageshow 中读取并清除 localStorage 记录。
滚动条位置记录不需要每次滚动都存，用节流控制能大幅减少写入频率，同时保证关键位置不丢失。核心是：只在滚动“稳定”或“阶段性停止”时保存一次最新位置，而不是监听每一次 scroll 事件。
节流函数的简易实现（不依赖 Lodash）
节流本质是限制函数在指定时间窗口内最多执行一次。适合滚动记录这种“高频触发、低频响应”的场景：
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}用法示例：
const saveScrollPosition = () => {
localStorage.setItem('scrollY', window.scrollY.toString());
};
<p>const throttledSave = throttle(saveScrollPosition, 300);
window.addEventListener('scroll', throttledSave);结合 visibilitychange 提升可靠性
用户切走标签页再回来时，滚动位置可能已变，但节流可能刚错过最后一次保存。此时可补充监听页面可见性变化，在页面重新可见时强制保存一次：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 监听 visibilitychange 事件
- 当
document.visibilityState === 'visible'时，立即调用saveScrollPosition() - 避免因节流遗漏“最后位置”
存储前加防抖兜底（可选增强）
如果对“最后一刻位置”要求极高（比如长表单页），可在节流基础上，对 scroll 结束做简单防抖兜底：
- 滚动开始时清除上一个延时器
- 每次 scroll 触发后，设一个
setTimeout(..., 150) - 若 150ms 内无新 scroll，则执行保存
- 这能捕获“滚动突然停止”后的最终位置，和节流形成互补
读取与恢复要兼顾兼容性和时机
保存只是第一步，恢复同样关键：
- 在
DOMContentLoaded或pageshow（支持前进/后退缓存）中读取localStorage.getItem('scrollY') - 用
window.scrollTo(0, y)恢复，注意加上{ behavior: 'auto' }避免 Safari 兼容问题 - 恢复后建议立刻清除 localStorage 中的记录，防止跨页面误用
