javascript - 在 Safari 上，当 DOM 在可见视口之外更新时，视口中的内容会发生变化

Question

在 Google Chrome 上，当向用户视口上方的 DOM 添加元素时，视口中的内容不会发生变化，而在 Safari 上会发生变化（等于新元素的高度）。

在视口之外进行更新后，Safari 上的内容怎么可能不发生变化？

编辑（2021-06-02）：我发现这种行为称为滚动锚定，更多详细信息可以在https://github.com/WICG/ScrollAnchoring和https://developer.mozilla.org/en-US上找到/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

---

在下面的演示视频中，一个项目被添加到列表顶部（每 4 秒）。添加项目时（以蓝色突出显示），视口中的内容（使用可滚动区域模拟）向下移动，导致布局移动。

• 源代码：https ://github.com/kevinfarrugia/poll-layout-instability
• 演示：https ://kevinfarrugia.github.io/poll-layout-instability/

Answer 1

最简单的解决方案可能是window.scrollY在更改页面之前读取，然后在插入新元素后将其设置回该值

const y = window.scrollY
updatePage()
window.scrollY = y