CSS content-visibility 使用后滚动位置为什么会跳动

长文章、瀑布流和消息列表经常会给每个区块加上 content-visibility: auto，让屏幕外的内容暂时跳过布局与绘制。页面初次打开确实更轻，但向下滚动时，如果浏览器此前使用的估算高度和内容真正排版后的高度差距较大，滚动位置就可能突然向上或向下偏移。

这不是滚动事件本身失控，而是元素从“尺寸占位”切换到“真实布局”时改变了文档总高度。给每个区块提供接近真实的 contain-intrinsic-size，对高度不稳定的区块使用 auto 记忆尺寸，再给图片和异步内容预留空间，通常就能把跳动压下来。

滚动跳动的根因是占位高度与真实高度切换

content-visibility: auto 会为元素启用一组较强的 containment。屏外卡片的子内容可以暂时不参与完整布局，浏览器需要先用一个“像是内容高度”的值把卡片放进文档流。若没有合适的内在尺寸，区块可能被当成很小的盒子；若估算值是 800px 而真实卡片只有 260px，卡片进入可见区域后，前后内容的位置都会重新计算。

因此要先区分两个现象：滚动条滑块变长或变短，说明文档的 scrollHeight 变了；当前阅读点突然移动，通常还叠加了浏览器对滚动锚点的调整。它们都指向“布局高度发生变化”，不是简单地把 scroll-behavior 改成 auto 就能解决。

先用一个可解释的尺寸估算稳定文档流

对均匀的列表卡片，可以先按一条接近平均值的高度占位。更精确的写法是把估算值放在块方向；兼容性要求较宽时，也可以使用 shorthand：

.feed-card {
  content-visibility: auto;
  /* 420px 是屏外卡片的预估块尺寸，不是强制最终高度。 */
  contain-intrinsic-block-size: auto 420px;
}

.feed-card img {
  /* 先保留媒体比例，避免图片加载后再次撑高卡片。 */
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

这里的 420px 不能照抄到所有页面。卡片内容差异大时，先用统计得到的中位高度；内容偏长的区块宁可稍微偏大，也不要让大量卡片在进入视口时连续变高。若布局是横向书写且需要更简洁的声明，可写成 contain-intrinsic-size: auto 420px，但要记住它是宽高方向的 shorthand。

高度差异很大时，让浏览器记住已经渲染过的尺寸

固定一个估算值只能解决“平均卡片”的问题。新闻正文、评论串或带异步推荐模块的卡片高度差距可能很大，这时 auto 420px 的意义是：元素正常渲染过后，浏览器可以记住它的尺寸；下一次它重新处于跳过状态时，优先使用记忆值，尚未渲染过的元素才使用 420px 作为后备估算。

如果卡片本身必须严格等高，例如虚拟列表已经把每一项设计成固定行高，直接设置 block-size 或使用稳定的网格轨道会更可靠。不要同时给出明显冲突的固定高度和内在估算值，然后期待后者自动修正布局。

用三个观测值确认修复是否真的生效

不要只凭“滚动起来顺了”判断。选择一个会跳动的滚动容器，在滚动前后记录 scrollTop、scrollHeight 和目标卡片的高度：

const scroller = document.querySelector('.feed');
const card = document.querySelector('.feed-card');

function readLayout(label) {
  // 这些值只用于定位布局变化，不改变滚动位置。
  console.table({
    label,
    scrollTop: scroller.scrollTop,
    scrollHeight: scroller.scrollHeight,
    cardHeight: card.getBoundingClientRect().height
  });
}

readLayout('before-scroll');
// 在真实页面中滚动到目标卡片后再次调用，比较高度和总高度。
readLayout('after-card-visible');

若 cardHeight 变化很大，同时 scrollHeight 也变化，优先调整估算值或为动态子内容留空间。若卡片高度稳定但 scrollTop 仍被业务代码重写，再去检查滚动监听器、分页插入和手动恢复位置逻辑。

常见问题

把 contain-intrinsic-size 设成 0 能彻底消除跳动吗？

不能。0 只会让未渲染区块在进入视口时突然变大，往往把跳动放大。它只适合你明确知道区块初始没有可见尺寸的场景。

为什么设置了 auto，第一次滚动仍然会动？

auto 需要元素先正常渲染过才能记住尺寸。第一次遇到的新卡片仍会使用后备长度，所以后备估算仍要接近真实值。

图片加载完成后仍然跳动怎么办？

为图片设置 width、height 或 aspect-ratio，并检查字体切换、折叠面板和异步推荐是否在卡片进入视口后改变高度。

排查顺序可以固定为：先看卡片高度是否变化，再看滚动容器总高度，最后检查业务代码是否插入或改写了内容。只要占位尺寸、真实尺寸和动态资源的关系清楚，content-visibility 就能兼顾长页面性能与滚动稳定性。