如何防止react在重新渲染时自动滚动页面？

Question

我在 React 中遇到了一个奇怪而烦人的问题 - React 在重新渲染时自动滚动页面。

CodeSandbox 上的演示应用程序 - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js

重现步骤：

• 将页面滚动到列表中间，使其第一个元素不再可见。
• 等待重新渲染发生。
• 看到页面自动滚动，因此第一个元素再次可见。

问题 - 当满足这些条件时，React 会自动滚动页面：

1. 我有一个垂直的项目列表。
2. 列表重新渲染（项目更改顺序）。
3. 列表在屏幕上可见，但第一个元素不可见（它位于屏幕上方）。

因此，当屏幕上看不到项目列表时 - 不存在自动滚动问题。 另外，当列表顶部低于屏幕顶部时 - 也不会发生自动滚动。

我创建了一个Vanilla JavaScript应用程序来测试它是否是Chrome特定行为 - 没有错误，一切都很好 - 使用Vanilla JS，当项目列表在屏幕上重新渲染时不会发生滚动。 它只会发生在 React 应用程序中，并且非常烦人。 正如您从我的 CodeSandbox 演示中看到的：

任何地方都没有滚动调用，但它仍然发生。

• 我不单击任何内容 - 只需将页面滚动到列表中间，即可看到页面自动滚动到顶部。
• 列表的高度不变。这里不应该发生布局跳转。

预期行为

- 重新渲染列表时不会发生滚动。 知道如何防止这种自动滚动吗？

Answer 1

<div key={Math.random()} className="item">

更新

这种行为称为“滚动锚定”。您可以像这样禁用它：

.container {
  ...
  overflow-anchor: none;
}

您好，您可以创建一个我在您的 codeSandbox 中尝试过的组件及其工作

Answer 2

即使使用 event.preventdefault()，我的页面仍不断向上滚动。

Answer 3

.container {
  ...
  overflow-anchor: none;
}