如何实现内容未完全加载时仍可在容器间滚动？

你的问题核心是资源加载阻塞了浏览器的布局计算和主线程，导致滚动条不稳定、滚动卡顿。以下是几个直接可用的代码方案，组合使用效果最佳：

1. 提前锁定容器尺寸，避免布局跳动 #

未加载的背景图或大内容会让容器高度不断变化，浏览器反复重排，直接卡死滚动。给容器提前设置和最终状态一致的固定高度/最小高度，再配合占位图过渡：

/* 背景图容器样式 */
.bg-section {
  height: 100vh; /* 比如占满视口高度，和实际内容匹配 */
  min-height: 900px; /* 兜底最小高度，防止内容过短 */
  background-position: center;
  background-size: cover;
  /* 先加载极小的低分辨率占位图（几十KB） */
  background-image: url('low-res-placeholder.jpg');
}
/* 高清图加载完成后替换 */
.bg-section.loaded {
  background-image: url('high-res-background.jpg');
}

// 监听高清图加载，完成后切换样式
const bgSections = document.querySelectorAll('.bg-section');
bgSections.forEach(section => {
  const targetImg = new Image();
  // 从元素的自定义属性里拿高清图地址，方便批量处理
  targetImg.src = section.dataset.hdBg;
  targetImg.onload = () => {
    section.classList.add('loaded');
  };
});

HTML里这样写：

<div class="bg-section" data-hd-bg="high-res-background.jpg"></div>

2. 用content-visibility延迟渲染非首屏元素 #

这个CSS属性能让浏览器暂时不渲染视口外的元素，大幅降低初始加载的主线程压力，滚动时再按需渲染：

/* 给所有非首屏的容器加上 */
.offscreen-container {
  content-visibility: auto;
  /* 提前告诉浏览器元素的预估高度，避免滚动到的时候突然跳布局 */
  contain-intrinsic-size: 1200px;
}

3. 懒加载非关键资源 #

把非首屏的背景图、图片设为懒加载，让浏览器优先加载首屏内容，不阻塞滚动：

用原生懒加载（支持现代浏览器）：

<!-- 用img标签做背景图，比background-image更容易控制懒加载 -->
<div class="bg-container">
  <img 
    src="high-res-bg.jpg" 
    loading="lazy" 
    alt="" 
    class="bg-img"
  >
</div>

对应的CSS：

.bg-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. 避免JS阻塞主线程 #

如果页面有大量非关键JS，给它们加上async或defer，不让脚本加载阻塞页面渲染和滚动：

<!-- 异步加载非关键脚本，不阻塞主线程 -->
<script src="analytics.js" async></script>
<script src="animation-lib.js" defer></script>

这些方法组合起来，就能让页面在内容完全加载前保持稳定的滚动体验，不同背景图容器之间的滚动也不会卡顿。

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