通过代码修改CSS Grid元素位置时页面莫名滚动？如何解决？

阿华AIGC实验室

2026-6-15

解决CSS Grid修改grid-row时页面自动滚动的问题

问题原因

这是Chrome和Firefox默认启用的**滚动锚定（Scroll Anchoring）**机制导致的。当页面内容布局发生变化（比如元素位置改变），浏览器会自动调整滚动位置，试图让用户当前关注的内容保持在视口中。修改grid-row导致元素在Y轴移动时，浏览器误判为内容偏移，触发了滚动锚定行为；而X轴移动不影响垂直滚动，所以没这个问题。Safari没有启用这个机制，所以表现正常。

解决方案

可以通过以下几种方式阻止这个自动滚动行为：

1. 全局禁用滚动锚定

在页面样式中添加：

html {
  overflow-anchor: none;
}

这会完全关闭整个页面的滚动锚定功能，适合不需要该机制的场景。

2. 仅禁用目标元素的滚动锚定

如果不想全局禁用，只给需要移动的网格元素添加样式：

.grid-item {
  overflow-anchor: none;
}

这样只有该元素的位置变化不会触发滚动锚定，页面其他部分的滚动锚定功能保留。

3. 临时禁用再恢复（动态操作场景适用）

如果只需要在修改grid-row的瞬间禁用，可以用JavaScript临时切换：

// 修改前先禁用全局滚动锚定
document.documentElement.style.overflowAnchor = 'none';
// 更新目标元素的grid-row属性
const targetItem = document.querySelector('.grid-item');
targetItem.style.gridRow = 'new-row-value';
// 触发页面重绘后恢复原设置
requestAnimationFrame(() => {
  document.documentElement.style.overflowAnchor = '';
});