Bootstrap 5瀑布流布局下滚动位置保持功能失效问题求助

Bootstrap 5的Masonry布局会动态计算元素位置和页面总高度，你的原脚本在window.onload时执行滚动恢复，但此时Masonry可能还未完成布局计算。当Masonry后续完成布局时，页面高度会发生变化，导致之前设置的滚动位置被重置，最终表现为滚动位置保持功能失效。

方案一：监听Masonry布局完成事件（推荐） #

直接监听Masonry的layoutComplete事件，确保在布局完全稳定后再恢复滚动位置：

// 保存滚动位置的逻辑保持不变
window.onbeforeunload = function(e) {
  sessionStorage.setItem('scrollpos', window.scrollY);
};

document.addEventListener('DOMContentLoaded', function() {
  // 找到Masonry容器元素（对应你页面中设置data-bs-masonry的元素）
  const masonryContainer = document.querySelector('[data-bs-masonry]');
  
  if (masonryContainer) {
    // 初始化Masonry（配置和你页面的data属性一致）
    const masonry = new Masonry(masonryContainer, {
      itemSelector: '.col' // 替换为你实际的列选择器
    });
    
    // 布局完成后恢复滚动位置
    masonry.on('layoutComplete', function() {
      const scrollpos = sessionStorage.getItem('scrollpos');
      if (scrollpos) window.scrollTo(0, parseInt(scrollpos));
    });
  } else {
    // 无Masonry时直接恢复滚动位置
    const scrollpos = sessionStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, parseInt(scrollpos));
  }
});

方案二：等待所有图片加载完成 #

Masonry的布局高度依赖图片尺寸，因此等所有图片加载完成后再恢复滚动位置，能确保布局稳定：

window.onbeforeunload = function(e) {
  sessionStorage.setItem('scrollpos', window.scrollY);
};

function restoreScrollPosition() {
  const scrollpos = sessionStorage.getItem('scrollpos');
  if (scrollpos) window.scrollTo(0, parseInt(scrollpos));
}

document.addEventListener('DOMContentLoaded', function() {
  const allImages = document.querySelectorAll('img');
  let loadedImageCount = 0;

  // 无图片时直接恢复
  if (allImages.length === 0) {
    restoreScrollPosition();
    return;
  }

  allImages.forEach(img => {
    // 图片已加载完成
    if (img.complete) {
      loadedImageCount++;
    } else {
      // 监听图片加载/失败事件
      img.addEventListener('load', incrementLoadedCount);
      img.addEventListener('error', incrementLoadedCount);
    }
  });

  function incrementLoadedCount() {
    loadedImageCount++;
    if (loadedImageCount === allImages.length) {
      // 给Masonry一点时间完成最终布局
      setTimeout(restoreScrollPosition, 100);
    }
  }

  // 所有图片初始已加载完成的情况
  if (loadedImageCount === allImages.length) {
    setTimeout(restoreScrollPosition, 100);
  }
});

方案三：延迟执行滚动恢复（快速临时方案） #

如果不想修改太多代码，可以通过延迟执行滚动恢复，给Masonry足够的布局时间：

window.onload = function() {
  // 延迟300ms执行，可根据页面加载速度调整
  setTimeout(() => {
    const scrollpos = sessionStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, parseInt(scrollpos));
  }, 300);
};

window.onbeforeunload = function(e) {
  sessionStorage.setItem('scrollpos', window.scrollY);
};

• 恢复滚动位置时，记得用parseInt()将存储的字符串转为数字，避免类型错误
• 方案一需要确保页面已正确引入Masonry库（Bootstrap官方示例中已包含）
• 方案二的兼容性和稳定性最好，适合包含大量图片的瀑布流页面

内容的提问来源于stack exchange，提问作者BigIWT