向下滾動更改網站路線

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. 在同一時間，它也改變頁面標題。