javascript - React 重新渲染溢出组件导致页面跳转

代码在这里供参考。

当按钮被按下时，状态发生改变，#container1 被#container2 替换。页面保持在相同的高度，外部容器保持在相同的高度。但是，在向下滚动页面（访问按钮所必需的）并按下按钮后，页面将向上滚动到中间的某个位置。我希望页面不会移动，因为没有更改布局，只有一些文本。

即使里面的文本溢出，我也需要容器具有固定的高度，并且似乎溢出导致了这个页面跳转错误。

有趣的事实：

如果 #container2 只有 1 个 div 元素，则该错误似乎不会发生。
该错误仅在第一次状态从#container1 更改为#container2 时发生，但如果您在查看#container1 时向上滚动任意数量，该错误将在下一次更改状态时出现。
大小确实很重要。我可以在编辑器中以及在“平板电脑”或“桌面”尺寸的“切换响应预览”模式下重现该错误。如果我在新选项卡中查看该页面，则不会出现该错误。
我使用了 Chrome，但快速测试表明该错误也出现在 Firefox 和 Edge 上。

标签： javascripthtmlcssreactjs

问题在这里： -

<div id="container1">

除非您明确告诉它，否则您container1不会将自己限制在其父级的高度。

将其更改为：-

<div id="container1" style={{ height: "100%" }}>