0

我过度设计的网络应用程序：

  • 使用history.pushState和popState事件，以动画化 URL 之间的移动，而不必在#URL 中使用 a。
  • 使用外部 div 来处理滚动条，并且 html 和 body 具有overflow:hidden. 这样当用户单击返回时，它不会在向左设置动画之前跳转到顶部。

现在我的问题是，如果用户再次单击前进按钮，我怎样才能保留他们滚动的位置/将它们向下滚动到原来的位置。

  • 我的第一个想法是使用history.state对象作为保存滚动位置的地方，然后在用户单击前进时将其加载。（我必须replaceState在没有history.state对象的第一页上。）这个想法的问题是，一旦用户点击返回，我就无法再将 scrollTop 添加到当前状态。

  • 我的下一个想法是使用一个单独的数组，所以我通过索引拉出滚动位置，但问题是如果用户关闭选项卡然后重新打开它，或者如果他们导航到另一个站点并返回稍后我的，他们的前后历史被保存，但我单独的scrollTops 数组会丢失。

你的建议是什么？

4

3 回答 3

1

Jörn Zaefferer为这个问题写了一个方法：https ://github.com/jzaefferer/pitfalls-examples/blob/master/app/gallery/gallery.js#L29-37

（如果您的母语是德语，请查看他的演讲：http ://www.youtube.com/watch?v=RGdbfKgPKI8 ）

于 2013-01-26T21:04:03.757 回答
1

如前所述，可以使用历史 API 的状态对象来跟踪页面的当前状态（例如滚动位置或表单字段条目）。

当然，在某些时候，必须将页面状态存储到历史状态对象中。然而，当浏览器触发了一个 popstate 事件时，已经为时已晚，因为之前的历史状态已经被弹出的状态所取代。

因此，必须在 popstate 事件之前存储页面状态。然而，由于没有 beforepopstate 事件，唯一可能的方法是不断地监听页面状态的变化（例如滚动或输入事件）并不断地用 replaceState 更新当前的历史状态对象。

然而，在基于 Chromium 的浏览器中，每次调用 replaceState 都会向用户简要显示加载指示器。如果您不想这样做，只需在 popstate 事件后调用一次 replaceState 即可。在这个调用中，在历史状态对象中存储一个唯一的 id。使用这个唯一的 id 作为键来在浏览器的会话存储中存储更多的状态。（您必须为缓存建模，因为条目可能会变成状态。）

于 2013-05-19T19:56:14.880 回答
0

使用 pushState 您可以将数据添加到历史状态，如下所示：

var stateObj = { scrollTop: "500px" };
history.pushState(stateObj, "page 2", "page.html");

当 window.onpopstate 的事件被触发时，它会返回 stateObj (event.state)，并且有你的 scrollTop 位置。

有一个很好的插件来控制 Windows 历史记录：

jQuery 动态 URL：https ://github.com/promatik/jQuery-Dynamic-URL

看这个例子： http: //promatik.no.sapo.pt/github/dynamic-url/

于 2013-01-26T21:33:07.067 回答