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

IT技术 javascript reactjs google-chrome
2021-05-01 22:05:16

我在 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 以这种意想不到的方式行事的任何建议？

2个回答

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

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

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>

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

其它你可能感兴趣的问题
上一篇无法读取未定义的 CompileError 的属性“类型”：始于未定义的 CSS 选择器“npm run build” 下一篇action-reducer 链如何在 react-redux 中工作