CSS Grid：如何在鼠标悬停动画时强制行向上动态扩展高度？

嘿，这个Chrome的Grid行为确实有点烦人，我之前做SPA布局时也踩过类似的坑！你遇到的核心问题其实是Chrome的**滚动锚定（Scroll Anchoring）**机制在搞鬼，再加上Grid布局默认的行对齐逻辑，导致当屏幕下半部分的行内容变化时，浏览器自动调整滚动位置，让你误以为行是向上扩展（其实是页面被往上推了）。要强制实现行向上扩展（也就是让行的底部固定，顶部向上延伸），可以试试下面这几个方案：

方案1：禁用滚动锚定 #

Chrome的滚动锚定是为了防止内容变化时用户的阅读位置被打乱，但在你的场景里它帮了倒忙。你可以给Grid容器或者整个文档添加CSS属性来禁用它：

/* 给Grid容器禁用滚动锚定，仅影响该容器内的内容 */
.grid-container {
  overflow-anchor: none;
}

/* 或者给整个文档禁用，影响范围更大 */
html {
  overflow-anchor: none;
}

这个属性会告诉浏览器，当容器内的内容高度变化时，不要自动调整滚动位置。这样当行内容增加时，行就会自然向上扩展（底部位置不变，顶部往上延伸），而不是页面被向上滚动。

方案2：固定Grid行的底部位置 #

你可以通过调整Grid的对齐方式，让目标行始终靠容器底部对齐，这样当行高度增加时，它只能向上扩展：

.grid-container {
  display: grid;
  grid-template-rows: auto; /* 保留你的行定义逻辑 */
  align-content: end;
  min-height: 100vh; /* 确保容器占满视口高度，让end对齐生效 */
}

如果你的Grid是局部布局（不占满整个视口），可以给容器设置相对定位，再给目标行设置绝对定位固定底部：

.grid-container {
  position: relative;
  min-height: 300px; /* 给容器设置最小高度 */
}

.target-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  grid-row: 2; /* 保留你的Grid行定位属性 */
}

这样行内元素高度增加时，行的底部位置保持不变，只能向上延伸。

方案3：用JavaScript手动控制滚动位置 #

如果CSS方案效果不理想，你可以在内容变化/hover事件触发前后，手动锁定滚动位置，强制行向上扩展：

const hoverElement = document.querySelector('.hover-target');

hoverElement.addEventListener('mouseenter', () => {
  // 记录当前滚动的Y坐标
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  // 执行你的内容生成/高度动画逻辑
  // ...
  
  // 动画结束后，强制恢复原来的滚动位置
  setTimeout(() => {
    window.scrollTo(0, currentScroll);
  }, 150); // 延迟时间根据你的动画时长调整
});

这个方法通过强制保持滚动位置不变，让行的高度变化只能向上扩展，不受浏览器滚动锚定的干扰。

额外注意点 #

• 如果你用了CSS动画，尽量用transform属性来实现高度变化（比如scaleY），减少不必要的重排重绘，避免干扰浏览器的滚动判断。
• 测试时建议关闭浏览器扩展，有些扩展可能会修改默认滚动行为。

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