今天給大家介紹的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');
以後媽媽再也不用擔心我被產品懟了
鏈接：https://juejin.im/post/5affc88f6fb9a07acc11fa7f
分享到:
閱讀更多 前端圈 的文章
