在 bootstrap 5 的 masonry 布局中，因元素动态重排导致 dom 渲染延迟，原生 `window.onload` 无法确保滚动恢复发生在 masonry 完成布局之后；需改用 `domcontentloaded` + 延迟执行或 mutationobserver 等机制，确保 scroll 恢复时机准确。
Bootstrap 5 官方文档中的 Masonry 示例 依赖 CSS Grid 实现响应式瀑布流（无需 JavaScript），但其布局计算依赖于浏览器对 grid-template-rows 的自动推导——这意味着所有图片、异步内容加载完毕前，容器高度可能尚未稳定。此时若在 window.onload 中立即执行 scrollTo()，滚动位置会因后续 Masonry 高度增长而“失效”：用户看似回到了原位置，实则被新增内容顶出视口。
✅ 正确做法是：等待 Masonry 布局真正就绪后再恢复滚动。推荐以下两种稳健方案：
方案一：使用 setTimeout 微延迟（轻量兼容）
适用于静态内容或图片已内联 height/aspect-ratio 的场景：
window.addEventListener('DOMContentLoaded', () => {
const scrollpos = sessionStorage.getItem('scrollpos');
if (scrollpos) {
// 延迟至下一轮事件循环，确保 CSS Grid 已完成首次布局
setTimeout(() => window.scrollTo(0, parseInt(scrollpos, 10)), 100);
}
});
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('scrollpos', window.scrollY.toString());
});方案二：监听 DOM 变化（高可靠性）
当页面含懒加载图片、动态插入卡片等复杂场景时，使用 MutationObserver 监听 .masonry 容器高度稳定：
window.addEventListener('DOMContentLoaded', () => {
const masonryEl = document.querySelector('.row'); // Bootstrap Masonry 容器通常为 .row
const observer = new MutationObserver(() => {
// 检测高度变化趋于稳定（连续两次检查无差异）
const height = masonryEl.scrollHeight;
if (height > 0 && !isNaN(height)) {
const scrollpos = sessionStorage.getItem('scrollpos');
if (scrollpos) {
window.scrollTo(0, parseInt(scrollpos, 10));
}
observer.disconnect(); // 仅触发一次
}
});
observer.observe(masonryEl, { childList: true, subtree: true, attributes: true });
});
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('scrollpos', window.scrollY.toString());
});⚠️ 注意事项：
- 避免使用 window.onload：它等待所有资源（含未优化图片）加载完成，而 Masonry 布局往往在资源加载前已完成，导致恢复过早；
- sessionStorage 是理想存储方式（页面关闭即清除，避免跨会话干扰），但需注意隐私模式下可能不可用，建议添加 try-catch；
- 若使用第三方 Masonry JS 库（如 Masonry.js），应监听其 layoutComplete 事件而非 DOM 变化。
通过以上任一方案，即可在 Bootstrap 5 的纯 CSS Masonry 布局中，精准维持用户滚动位置，提升单页应用体验的一致性与专业性。
