History API:ScrollRestoration


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM