重新渲染后保持滚动 [英] Keep scroll-y after rerender

问题描述

我有很多复选框的下拉列表，所以这个容器有滚动.但是当我点击任何复选框时 - 它会选择\取消选择自己，然后状态发生变化.

所以问题是这个容器在重新渲染后又回到了顶部.是否可以在渲染后保持容器的滚动而不将其保存到状态?

解决方案

可以在提交阶段之前保存滚动位置的快照".

getSnapshotBeforeUpdate() 显示了您正在寻找的内容.>

文档示例在 getSnapshotBeforeUpdate 生命周期方法中保存当前滚动位置，然后使用传递给 componentDidUpdate(prevProps, prevState, snapshot) 的 snapshot 值code> 作为恢复滚动位置的最后一个参数.

它不需要创建一个状态来按照您的要求保存滚动位置.

I have dropdown list with a lot of checkboxes, so this container has scroll. But when i click on any checkbox - it selects\deselects itself and then state changes.

So the problem is that after rerendering this container is back to the top. Is it possible to keep container's scroll after rendering without saving it to the state?

解决方案

You can save the "snapshot" of the scroll position before the commit phase.

getSnapshotBeforeUpdate() shows kind of what you are looking for.

The documentation example saves the current scroll position within getSnapshotBeforeUpdate lifecycle method and then use the snapshot value passed to componentDidUpdate(prevProps, prevState, snapshot) as the last argument to restore the scroll position.

It doesn't require creating a state to save the scroll position as you requested.

这篇关于重新渲染后保持滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！