向下滚动更改网站路线

Question

我今天早些时候正在浏览石英并发现一些有趣的东西。当您在一篇文章中向下滚动到下一篇文章时，网站路线会在您滚动时发生变化。什么技术/ javascript包推动了这个？

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

Answer 1

他们正在使用某种无限滚动（许多库，只是google），以及某种路由库/插件（如Backbone.Router）。路由lib在较新的浏览器中使用History 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. 同时，它也会更改页面标题。