Bootstrap 5 中 Masonry 布局下保持滚动位置的完整解决方案

在 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 布局中，精准维持用户滚动位置，提升单页应用体验的一致性与专业性。