在 Chrome 中使用 React 添加新的 DOM 项不会保持预期的滚动位置

Question

我在 React 中向状态数组添加新项目时遇到了一个意外问题，这导致更多项目被添加到 DOM。在 Safari 和 Firefox 中，这会导致新的 DOM 项目被添加到折叠下方，我必须向下滚动才能看到新项目。在 Chrome 中，屏幕保持滚动到页面底部，项目添加在上面。这意味着我需要向上滚动才能看到新项目。这显然不是延迟加载或“加载更多”按钮以查看列表中更多博客文章的预期行为。

见这里：https : //codesandbox.io/s/new-leaf-0fnv5?file=/src/App.js

以下是一些其他观察结果：

1. 我在另一台装有 Chrome 的 Mac 上尝试了它，它的行为更像 Safari 和 Firefox，但稍微向上滚动，以便在单击“添加更多”之前看到最后一个项目位于折叠下方。
2. 鉴于两种浏览器之间的差异，必须有一种方法可以实现更稳定的预期行为。
3. 我以前创建过类似的“加载更多”列表，以前从未遇到过这种情况。我也从未在其他实时网站上看到过这种行为，所以很明显我做的一些不同的事情会触发 Chrome 有时会以这种方式行事，我只是不知道是什么。
4. 我注意到关于 SO 的一两个类似问题，但没有一个解决为什么在 Chrome 中有时会发生这种情况的问题，但并非总是如此。

关于什么可能影响 Chrome 以这种意想不到的方式行事的任何建议？

Answer 1

似乎解决方案是overflow-anchor: none在 body 标记（或处理滚动的某些父 div）上使用 CSS属性。

https://css-tricks.com/almanac/properties/o/overflow-anchor/