正在使用项的ID恢复滚动位置 [英] restoring scroll position with id of items

问题描述

我想在从B页面(比如说，项目的详细信息)返回时恢复滚动位置A页面(项目列表)。我已经找到了解决方案here，但专家/评论员告诉我，最好通过react-routes实现它，因为当前的输出是使用sessionStorage完成的。 目前，我从A页面导航到B页面，路线如下： /channelId/items/itemId。当使用history.push(/)返回时，我会进入项目列表的顶部。

附言：我不能分享源代码。请询问您是否有任何疑惑。 我使用的是REACT-RIGHER v4

api

这比我们想象的要复杂得多，因为让我们假设一个场景，在这种情况下，您的项目将来自推荐答案，在这种情况下，您首先必须等待数据，这样自动滚动到最后一个位置就可以正常工作。

我很久以前在一个项目中这样做过。

这些是步骤

1. 在列表/项目页上，您需要注册卷轴的监听程序more-details。
2. 在执行将用户导航到新屏幕的任何功能之前，您需要提取x轴位置并将其保存到会话存储。
3. 然后在列表/项目页面上，您需要等待获取数据，之后，您可以滚动到屏幕的特定位置more-details。

注意：以上共享解决方案与任何元素无关，它与屏幕相关。

如果您想要使用一个非常简单的ID，但在某些情况下，您可能需要等待数据被检索和呈现。

按照以下步骤操作

1. 导航之前，您可以将元素ID设置为会话存储或在URL中
2. 当用户返回屏幕时，您可以等待该元素呈现，然后您可以使用element.scrollTo(x-coord, y-coord)
滚动到该元素

结论： 我建议使用第一种方法，因为有时可能会出现这样的情况：即使在从API获取数据之后，也没有呈现您的引用。

这篇关于正在使用项的ID恢复滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！