恢复后退按钮上的滚动位置答案

【问题标题】：Restore scroll position on back button恢复后退按钮上的滚动位置
【发布时间】：2015-06-16 23:52:19
【问题描述】：

我有一个路由处理程序，它从商店请求数据，然后映射该数据以呈现组件列表。我的问题是，当我导航到另一个页面然后返回时，滚动位置不会恢复，因为必须重新渲染组件。是否有延迟设置滚动位置直到列表呈现，或者在任何类型的导航中保留和恢复呈现组件的状态？

【问题讨论】：

【解决方案1】：

如果可以的话，我会缓存你正在渲染的列表，那么后退/滚动应该不是问题。

如果不能缓存列表，可以在Router.create中supply自己的scrollBehavior这样调用：

var router = Router.create({
  routes: routes,
  scrollBehavior: YourScrollBehavior
});

【讨论】：

我应该将它缓存在会话存储中还是有更好的反应方式？
我不是 *flux 专家，但我怀疑是否存在开箱即用的 react/flux 解决方案。
是的，只需将其缓存在 sessionStorage 或 localStorage 中。不管是什么人。现在是狂野的西部

【解决方案2】：

您可以在组件上使用 willTransitionTo 处理程序来延迟路由转换，直到您从 API 异步获取数据。这样，路由器可以恢复正确的滚动位置，因为组件会立即用所有数据呈现。

【讨论】：

【解决方案3】：

你有没有想过只做意见display: none？

使用 id 属性序列化所有 <divs/>，并在创建 display: none 时保留一个维护历史记录的数组。

现在，当一个使用回到历史时，访问这个对象并再次显示那个旧的 div。

此解决方案可让您避免再次重新渲染组件，并且还使浏览器更快，因为display: none 的 DOM 节点不会影响浏览器性能。

var divHistory = [
  {id: 'qwer', scrollPosition: 30},
  {id: 'poiu', scrollPosition: 102},
  {id: 'asdf', scrollPosition: 0},
  {id: 'lkj', scrollPosition: 0},
  {id: 'zxcv', scrollPosition: 4050}
]

【讨论】：