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

原文連接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 資料