如何修复Vue在v-for中的跳跃滚动，并自动添加元素

Question

屏幕记录

在上面的视频中，Safari、Chrome和Firefox中的相同网络应用程序。

在按下开始后，一个无限循环生成新的瓦片，计算的数组将其放置在；临时的"；在window.scrollY确定的位置的主阵列中，等待1秒，然后将此瓦片永久添加到阵列中。当前window.scrollY每8ms更新一次，并显示在右上角。

我所做的是，在开始后，我等待至少5个瓦片被添加，然后缓慢向下滚动，不让50-100像素。正如你在视频中看到的那样，Safari处理得很好，滚动行为正如预期的那样。Chrome突然跳到+200左右，Firefox跳到数组的末尾。

您可以忽略所有transition-group动画和每个磁贴的动画，禁用它们不会更改任何内容。ScrollTo或任何类似的东西从未在代码中使用。

V-for是这样使用的：

<div id="tileStack">
<transition-group name="transitionStack" tag="ul">
<TileItem 
v-for="tile in tileStackWithGap"
:key="tile.key
/>
</transition-group>
</div>

其中CCD_ 6是具有在中切片的新瓦片的计算阵列

所有相关的CSS规则都是：

html, body, ul {
margin: 0;
padding: 0;
}
#tileStack {
width: 100vw;
padding: 40.5vh 0;
}
.tileMain {
width: 30vh;
max-width: calc(100vw - 4vh);
height: 15vh;
padding: 0px;
margin: 2vh auto;
border-radius: 3vh;
}
.tilePreview {
width: 24vh;
max-width: calc(80vw - 3.2vh);
height: 12vh;
border-radius: 2.4vh;
}

其中CCD_ 7被施加到"；临时的"；瓦片

是什么导致了这种行为？有没有办法与之抗争？

Answer 1

事实证明，这种行为是由滚动锚定引起的，而在我的情况下恰恰相反。可使用overflow-anchor: none关闭