Vue中v-for自动添加元素时滚动跳动问题的解决方法

原因分析 #

Chrome和Firefox默认启用的**滚动锚定（Scroll Anchoring）**机制是导致该问题的核心：
当页面动态插入/修改内容时，浏览器会自动调整滚动位置，试图让用户当前视野内的内容保持可见。但你的场景中，临时插入的tile会改变页面布局高度，1秒后又被永久替换——这个频繁的布局变动让浏览器的锚点计算出现偏差，错误地将临时tile作为锚点对象，当临时tile被替换时，浏览器强制调整滚动位置以维持锚点可见，最终导致滚动跳变。而Safari的滚动锚定逻辑对这类临时插入的元素处理更保守，因此未出现异常。

另外，临时tile与永久tile的高度差异（.tilePreview比.tileMain小）会放大布局变化的幅度，进一步加剧了滚动锚定的误判。

解决办法 #

1. 禁用滚动锚定（最直接有效） #

给动态内容容器#tileStack添加overflow-anchor: none属性，阻止浏览器自动调整滚动位置：

#tileStack {
  width: 100vw;
  padding: 40.5vh 0;
  overflow-anchor: none; /* 新增规则 */
}

该属性会让浏览器放弃对这个容器内的内容变动进行滚动锚定调整，完全由用户控制滚动行为。

2. 统一临时与永久tile的高度 #

消除临时tile和永久tile的高度差，减少布局变化幅度，降低滚动锚定误判概率：

.tilePreview {
  width: 24vh;
  max-width: calc(80vw - 3.2vh);
  height: 15vh; /* 改为和.tileMain一致的高度 */
  border-radius: 2.4vh;
  /* 若需要视觉区分，可调整其他属性如opacity、border */
  opacity: 0.8;
}

3. 手动控制滚动位置（备选方案） #

在插入临时tile前记录当前滚动位置，永久添加tile后恢复该位置，避免浏览器自动调整：

// 插入临时tile前记录滚动位置
const savedScrollPos = window.scrollY;

// 执行临时tile插入逻辑...

// 1秒后完成永久添加时恢复滚动位置
setTimeout(() => {
  // 仅当用户未主动滚动时恢复，避免冲突
  if (window.scrollY === savedScrollPos) {
    window.scrollTo(0, savedScrollPos);
  }
}, 1000);

内容的提问来源于stack exchange，提问作者Тарас Мукин