使用 記錄 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
」,歡迎隨時提供意見或告知其他廠商。