当scrollTop为零时在渲染后反应滚动位置

Question

我试图了解可滚动div中的数据更改时react的行为。

如果新数据包含一些当前可见的项目，则react将管理滚动位置以使那些元素保持可见。

想象一下两组元素：a,b,c,d,e,f,g,h,i和f,g,h,i,j,k,l,m一个容器div，它在垂直的可滚动列表中显示它们，足够大，一次只能显示两个元素。

如果我向下滚动到element f然后更改数据，element f仍然是可见的。我相信这是可行的，因为每个元素都有其自己的唯一密钥。

如果滚动位置为0，则行为会有所不同：呈现新元素后，如果我更改回第一组，则滚动将仍为零，而不是on f。如果尝试此操作，则仅向下滚动一个像素即可正常工作。

这里是一个完整的最小工作示例：https : //codepen.io/depsir/pen/OGGZPd

所以这两个问题：

1. 对此有反应吗？如果是这样，是否有任何有关此行为的文档？
2. 即使在渲染器中，我如何仍然保持常见的可见元素scrollTop = 0？

---

编辑：我发现示例的行为在浏览器之间是不同的：firefox mobile和safari在任何情况下都保持滚动位置固定。

Answer 1

我发现这种行为与浏览器相关，所以现在我可以回答我的第一个问题：

反应是这样做的吗？如果是这样，是否有关于此行为的任何文档？

不，浏览器在做一切事情。您可以使用 DOM api 简单地尝试一下：

// given a list of elements, in a scrollable container, 
// add a new element at first position
const list = document.getElementById("yourListId")  
list.insertBefore(getNewElement(), list.childNodes[0])

在这里您可以找到一个工作示例：https ://codepen.io/depsir/pen/GaRwWa

至于问题二，由于react什么也没做，很明显这种行为必须手动管理。