Svelte虚拟网格滚动时修改Dom高度触发滚动死循环问题

这个死循环和Svelte框架无关，是浏览器默认的**滚动锚定（Scroll Anchoring）**特性和你的业务逻辑形成了反馈环导致的：

• 你绑定了页面滚动距离scrollY，滚动时scroll值增加，响应式变量height同步升高，.holder高度变大会把下方的蓝色.box向下推
• Chrome 56+版本默认开启滚动锚定能力，浏览器为了保证用户当前视口内的可见元素不跳动，会自动调整scrollY值让.box停留在视口原来的位置，这就导致scroll值进一步被动升高
• 被动升高的scroll又会触发height继续变大，形成死循环

你在React中没有复现是因为React的状态更新是批量异步的，刚好避开了这个反馈环的触发条件，并不是逻辑本身没问题。

方案1：最小改动解决（推荐） #

直接给动态调整高度的.holder元素禁用滚动锚定即可，不需要修改业务逻辑：

.holder {
  overflow-anchor: none;
}

这个属性会告诉浏览器不要把.holder作为滚动锚定的参考元素，不会在它高度变化时自动调整滚动位置，直接打断死循环。

方案2：优化虚拟滚动布局（适合复杂场景） #

虚拟网格/列表的工业级实现通常不会直接用全局body作为滚动容器，推荐你调整布局：

• 套一个固定高度、设置了overflow: auto的容器作为滚动容器，所有虚拟网格的内容都放在这个容器内部
• 滚动绑定改为监听这个容器的scrollTop，而不是全局的scrollY
  这种方案可以完全隔离全局滚动的影响，后续做复杂的网格渲染、偏移计算时可控性更高。

position: fixed会让元素脱离正常文档流，你需要自行维护元素位置和滚动偏移的同步，虚拟网格场景下需要处理大量单元格的位置计算，用fixed反而会引入更多偏移误差、层级冲突问题，确实不适合你的需求。

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