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

Question

在向 React 中的状态数组添加新项目时，我遇到了一个意想不到的问题，这导致更多项目被添加到 DOM 中。在 Safari 和 Firefox 中，这会导致新的 DOM 项目被添加到折叠下方，我必须向下滚动才能看到新项目。在 Chrome 中，屏幕保持滚动到页面底部，项目添加在上方。这意味着我需要向上滚动才能看到新项目。这显然不是延迟加载或“加载更多”按钮以查看列表中更多博客文章的预期行为。请参阅此处：https ://codesandbox.io/s/new-leaf-0fnv5?file=/src/App.js以下是一些其他观察结果：我在另一台装有 Chrome 的 Mac 上试过它，它的行为更像 Safari 和 Firefox，但稍微向上滚动，以便在单击“添加更多”之前看到最后一个项目。鉴于两种浏览器之间的差异，必须有一种方法来实现更稳定的预期行为。我以前创建过类似的“加载更多”列表，但以前从未遇到过。我也从未在其他实时网站上看到过这种行为，所以很明显我正在做一些不同的事情来触发 Chrome 有时会以这种方式运行，我只是不知道是什么。我在 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 => ({

  root: {

    flexGrow: 1,

  },

  noBrowserScrolling: {

    overflowAnchor: "none",

  }

}));

            <Button

              variant="outlined"

              color="default"

              fullWidth

              onClick={onLoadMore}

              disabled={!moreExists}

              className={classes.noBrowserScrolling}

            >

              {moreExists ? "Show More" : "No More to Load"}

            </Button>

我没有足够的评论点，所以必须提交一个单独的答案，对不起亚当