# One step further than SPA

最近看到一篇報導，亂滑時 url 欄位給了我一點小小的震撼


往下滑一點


URL 自動刷新了但沒有加載，怎麼做到的！？

跟群內的小夥伴討論了一下，是基於以下兩個功能做到的

https://scrollmagic.io/

+

https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState

透過 scrollmagic 在頁面上打滑動 Hook，觸發後調用 `window.history.replaceState(null, "", "/NewPath")`

就可以直接在不加載的情況下替換 Url Path

## 應用場景

如 https://www.blocktempo.com/scam-gangs-of-4-members-unable-to-defeat-the-victim-weighing-over-a-hundred-kg/ 的用法，替換 url 方便用戶直接複製分享或跳轉，解決如 FB/Twitter 類 SPA 在查看 Feed 流時沒辦法保存當前瀏覽位置的問題

在 feed 流的應用上完全可以讓 url 不斷自動替換為 index，這樣跳轉時就可以自動回到 feed 流指定 offset，不再會有 SPA 對於 Feed 流每次都要從頭加載的狀況

並且這個模塊還能用 pushState/replaceState 直接編輯當前 tab 的 history

> Check here to see the difference https://stackoverflow.com/questions/17507091/replacestate-vs-pushstate