向下滚动更改网站路线

Question

今天早些时候我正在浏览石英，并注意到一些有趣的事情。当您在一篇文章和下一篇文章之间向下滚动时，网页路由会在您滚动时发生变化。什么技术/ JavaScript包驱动这个？

防爆http://qz.com/305715/the-quartz-chart-of-the-year-short-list-is-here/

Answer 1

他们正在使用某种形式的无限滚动的（许多库，它只是谷歌），以及某种路由库/插件（如Backbone.Router）的。路由库在较新的浏览器中使用历史API，或在较旧的浏览器中使用基于散列的URL片段。

基本上，他们等着你滚动到文章的最后，引发一个事件。之后，无限滚动通过AJAX加载另一篇文章，并通过路由库设置新路由。

Answer 2

我的朋友问我同样的问题。所以我为它做了一个插件。我认为这是你想要的。

https://github.com/wataruoguchi/clever-infinite-scroll

这是如何利用无限滚动更改URL的过程。

1. 看着滚动事件。当滚动点击页面底部时，Ajax调用下一个内容。链接指下一个内容被删除。 这是非常基本的无限滚动。
2. 当下一个内容加载时，它实现隐藏的span标签，包含内容的URL字符串和页面标题字符串。观看滚动事件。
3. 根据滚动位置查看内容时，请按history.pushState（）更改URL。 URL和标题这两个字符串都是从隐藏的span元素中获取的。
4. 在同一时间，它也改变页面标题。