子元素高度变化时容器自动滚动至顶部问题咨询

我完全懂你遇到的这个诡异情况——滚动一段距离后，只要容器里的子元素高度一变，整个滚动容器就直接跳回顶部，这体验确实糟心。结合你说的布局结构：body设了overflow:hidden，.l-page是100vh的CSS Grid容器，.l-content作为滚动区域，这个问题的根源大概率是Grid布局重排时，浏览器对滚动位置的计算出现了偏差。

问题原因拆解 #

当子元素高度变化触发重绘时，Grid布局的容器在重新计算布局的过程中，部分浏览器的引擎会错误地重置滚动容器的scrollTop值。简单说就是，高度变化引发的布局更新让浏览器“忘了”之前的滚动位置，直接把容器拉回了顶部。

可行的解决办法 #

1. 禁用滚动锚定（优先尝试CSS方案）

浏览器自带的滚动锚定特性本来是用来防止内容跳动的，但在某些Grid布局场景下会帮倒忙。给你的滚动容器.l-content加上这个属性，就能阻止它自动重置滚动位置：

.l-content {
  overflow-anchor: none;
}

2. 强制Grid容器尊重子元素溢出

有时候Grid容器会默认忽略子元素的溢出设置，给.l-page加上min-height: 0，强制它正确计算子元素的布局：

.l-page {
  display: grid;
  height: 100vh;
  min-height: 0; /* 关键属性 */
}

3. JS手动保存恢复滚动位置（兜底方案）

如果上面的CSS方法都不生效，就用JS在高度变化前后手动控制滚动位置：

const contentContainer = document.querySelector('.l-content');
// 先记下当前滚动位置
const currentScroll = contentContainer.scrollTop;

// 这里执行你改变子元素高度的操作（比如修改DOM、切换类名等）

// 用requestAnimationFrame确保DOM更新完成后再恢复位置
requestAnimationFrame(() => {
  contentContainer.scrollTop = currentScroll;
});

这些方法里，前两个CSS方案更简洁也更符合原生布局逻辑，建议先试；如果还是有问题，再用JS方案兜底。

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