History API - 捲動還原

Paul Lewis

使用 記錄 API 管理網址,一點都不費吹灰之力,也是優質網頁應用程式的重要功能。但其中一個缺點是系統會儲存捲動位置,更重要的是,在您週遊記錄時「還原」。這通常代表捲動位置會自動變更,不見得會突然跳轉,尤其當應用程式會轉換或以任何方式變更頁面內容時,更是如此。最終會導致使用者體驗不佳。

更不容小覷的事情:Chrome 會在 scroll 事件之前觸發 popState 事件,這表示您可以在 popState 中讀取目前的捲動位置,然後使用 window.scrollTo (Ewww) 對 scroll 事件處理常式進行反轉 (但至少可以正常運作!),不過 Firefox 會在 popState 之前觸發 scroll 事件,因此無法確定舊的捲動值會還原。啊!

不過好消息是,這項修正做法或許可以提高:history.scrollRestoration。它會採用兩個字串值:auto,用於保留目前的所有內容 (且為預設值) 和 manual,也就是說,當使用者穿越應用程式的記錄時,您會取得任何必要的捲動變更的擁有權。如有需要,您可以在使用 history.pushState() 推送記錄項目時追蹤捲動位置。

這項功能是全新的實驗性功能 (雖然效果出色),因此使用前請務必檢查:

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

您可以在 Chrome 46 以上版本中找到 history.scrollRestoration,也可以在這裡查看其規格

如有任何其他供應商也願意支援「scrollRestoration」,歡迎隨時提供意見或告知其他廠商。