在 bootstrap 5 的 masonry 布局中，因元素动态重排导致原生 scroll position 恢复失效；需确保滚动恢复逻辑在 masonry 渲染完成后再执行，而非仅依赖 `window.onload`。
Bootstrap 5 官方文档推荐的 Masonry 示例 实际上并未内置 Masonry 功能——它依赖外部库（如 Masonry.js 或 CSS column-count + break-inside 模拟）。而无论采用哪种实现，其核心问题一致：DOM 重排发生在页面加载后，window.onload 触发时 Masonry 尚未完成布局计算，此时读取/恢复滚动位置会因内容高度突变而失效。
✅ 正确做法是：将滚动恢复逻辑延迟至 Masonry 初始化完成之后执行。若使用 JavaScript 驱动的 Masonry（如 Masonry.js），应监听其 layoutComplete 事件；若使用纯 CSS 列布局（Bootstrap 官方示例实际采用的方式），则需用 requestAnimationFrame 或 setTimeout 确保渲染队列清空：
<!-- 示例：基于 CSS columns 的 Bootstrap Masonry --> <div class="row" id="masonry-container"> <div class="col-12 col-sm-6 col-lg-4 mb-3">...</div> <div class="col-12 col-sm-6 col-lg-4 mb-3">...</div> <!-- 更多卡片 --> </div>
// ✅ 推荐方案：等待渲染稳定后再恢复滚动
document.addEventListener('DOMContentLoaded', function() {
// 1. 先保存退出前的滚动位置
window.addEventListener('beforeunload', function() {
sessionStorage.setItem('scrollpos', window.scrollY);
});
// 2. 等待 DOM 渲染 & Masonry 布局完成（关键！）
setTimeout(() => {
const scrollpos = sessionStorage.getItem('scrollpos');
if (scrollpos && !isNaN(scrollpos)) {
// 使用 smooth 滚动提升体验，兼容性良好
window.scrollTo({ top: parseInt(scrollpos), behavior: 'auto' });
// 清除已使用的记录，避免跨会话误恢复
sessionStorage.removeItem('scrollpos');
}
}, 300); // 300ms 足够覆盖 CSS columns 重排延迟；可按需调整
// ? 进阶：若使用 Masonry.js，应这样写：
// const elem = document.querySelector('#masonry-container');
// const msnry = new Masonry(elem, { itemSelector: '.col-*' });
// msnry.on('layoutComplete', () => {
// const scrollpos = sessionStorage.getItem('scrollpos');
// if (scrollpos) window.scrollTo(0, parseInt(scrollpos));
// sessionStorage.removeItem('scrollpos');
// });
});⚠️ 注意事项：
- 不要仅依赖 window.onload —— 它只保证资源加载完成，不保证 CSS 布局渲染完毕；
- sessionStorage 适合单页内跳转（如锚点、Tab 切换），若涉及跨页面导航，需结合 history.state 或服务端支持；
- 使用 behavior: 'auto' 而非 'smooth' 可避免 Safari 等浏览器在 scrollTo 时触发额外重排；
- 恢复后建议 removeItem('scrollpos')，防止用户刷新页面时重复滚动或状态污染。
总结：Bootstrap Masonry 的滚动保持不是脚本缺陷，而是执行时机错配。通过将 scrollTo 移至渲染稳定期（setTimeout / Masonry 事件钩子），即可无缝兼容，无需修改布局逻辑。
