History API - 捲動還原

Paul Lewis

使用 History API 管理網址是個很棒的做法,也是優質網頁應用程式的重要功能。不過,這項方法的缺點之一是,每次瀏覽記錄時,系統都會儲存捲動位置,然後還原這些位置。這通常表示捲動位置會自動變更,導致不雅的跳躍,尤其是在應用程式進行轉場或以任何方式變更頁面內容時。最終導致使用者體驗不佳。

更糟的是,您幾乎無法解決這個問題:Chrome 會在 scroll 事件前觸發 popState 事件,這表示您可以在 popState 中讀取目前的捲動位置,然後使用 window.scrollToscroll 事件處理常式中反轉 (雖然很噁心,但至少可以運作)。不過,Firefox 會在 popState 之前觸發 scroll 事件,因此您無法得知舊的捲動值,以便還原。呸!

好消息是,我們可能有解決方法:history.scrollRestoration。這個屬性會採用兩個字串值:auto 會維持現狀 (也是預設值),而 manual 則表示開發人員會負責使用者瀏覽應用程式記錄時可能需要的任何捲動變更。如有需要,您可以使用 history.pushState() 推送記錄項目,並追蹤捲動位置。

這項功能是全新的實驗功能 (但非常棒),因此請務必先確認是否可用,再使用這項功能:

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

history.scrollRestoration 會出現在 Chrome 46 以上版本,您可以在此查看規格

別忘了提供意見回饋,並告訴其他供應商,您希望他們也能支援 scrollRestoration