在 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 标签上使用 CSS 属性（或一些处理滚动的父 div）。https://css-tricks.com/almanac/properties/o/overflow-anchor/

Answer 2

Chrome 的最新更新也对我做了同样的事情，搜索了几天，每天都有新人报告。但是鉴于上面的答案，我暂时将其作为修补程序实施，直到他们承认重大更改对我来说，在页面内容末尾按下一个按钮后，我加载了更多内容，错误是当加载新内容时该按钮保持在视图中，因此跳过了新内容，修复工作但是 css 属性可以像这样直接在按钮上：const useStyles = makeStyles(theme => ({&nbsp; root: {&nbsp; &nbsp; flexGrow: 1,&nbsp; },&nbsp; noBrowserScrolling: {&nbsp; &nbsp; overflowAnchor: "none",&nbsp; }}));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="outlined"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="default"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fullWidth&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={onLoadMore}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled={!moreExists}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={classes.noBrowserScrolling}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {moreExists ? "Show More" : "No More to Load"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>我没有足够的评论点，所以必须提交一个单独的答案，对不起亚当