瀏覽器恢復滾動行為~瞭解一下

Jsonz發表於2019-03-01

原文連結jsonz1993.github.io/2018/05/his…

今天給大家介紹的history不是講那套state,而是一個簡單的屬性scrollRestoration

直入主題。之前做移動端的需求時,經常遇到一種常見,就是:
a頁面是一個長列表,我們滑動到某個地方假設為 100px ,點選之後進入到b頁面
再從b頁面回到a頁面,這時候瀏覽器的滾動條會自動回到我們跳轉前的位置,也就是 100px 的位置。

瀏覽器恢復滾動行為~瞭解一下
瀏覽器記住滾動行為 圖不動重新整理一下

這種體貼的行為我是很喜歡的~ 但是有時候產品就非要抬槓,說 我就不想要這種行為,你給我回到頂部去(╯‵□′)╯︵┻━┻

以前沒辦法就經常用什麼 setTimeout 大法去手動處理這些東西

氮素!!! 如果只是說setTimeout大法的話,就沒我什麼事了。
今天要說的是 history.scrollRestoration ,這個屬性是實驗性的屬性,他的作用是: 允許Web應用程式在歷史導航上顯式地設定預設滾動恢復行為。此屬性可以是自動的(auto)或者手動的(manual)。

說的很明白了,如果瀏覽器支援 history.scrollRestoration並且值為auto則會預設恢復滾動行為。如果設定為 manual則可以取消,這個行為不用去考慮相容性的問題,如果有這個功能才會有恢復滾動,所以直接判斷一下就可以了。無需多考慮

window.history.scrollRestoration && (window.history.scrollRestoration = `auto`);
複製程式碼

以後媽媽再也不用擔心我被產品懟了

google-developers 資料

mozilla-developer 資料

相關文章