By Paul Lewis(設計和性能倡導者) 翻譯:江天
使用history api管理url是非常棒的一件事,可以說這是一個好web app的極為重要的特點。但它有一個缺點,滾動位置雖然被存儲但更重要的是,當history來回循環的時候的存儲。這種情況往往意味着當滾動位置自動改變的時候很難看的跳轉,特別是當你的app發生變遷,或者是頁面內容發生了任何改變,基本上都會導致非常糟糕的用戶體驗。
為了減少這種糟糕體驗你能做的不多。chrome在觸發scroll事件前會先出發popState事件,這意味着你可以去popState中讀取到當前滾動位置,然后反向運用到scroll事件句柄上,使用window.scrollTo(至少能工作)。但firefox,先出發scroll事件,再是popstate,老的scroll值你毫無辦法獲取到,甭談儲存下來。呸!
好消息是,這有個潛在的辦法,history.scrollRestoration。它提供兩個值,auto,作為它的默認值,可以像你所見的大多數情況一樣工作,另一個manual,意味着作為一個開發者你擁有了自主掌控任何所需的scroll改變,當用戶循環往復於app的history中。如果需要,你可以跟蹤scroll的位置軌跡,當你使用history.pushState(),push history的時候。
這個特點是html5新增的實驗性質的api,雖然很炫。因此你在使用的時候需要確保瀏覽器是支持的,檢測代碼:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
該api在chrome 46以上被支持,接口文檔:https://majido.github.io/scroll-restoration-proposal/history-based-api.html#web-idl