前言

通常我們?cè)跒g覽web頁(yè)面時(shí)，當(dāng)瀏覽到某個(gè)位置跳去了其它頁(yè)面瀏覽后再回到開(kāi)始時(shí)的那個(gè)頁(yè)面時(shí)，瀏覽器會(huì)幫我們重新定位到我們離開(kāi)頁(yè)面時(shí)的位置，對(duì)于絕大多數(shù)場(chǎng)景來(lái)說(shuō)，這確實(shí)是一個(gè)非常好的體驗(yàn)設(shè)計(jì)!但有時(shí)候我們往往不想這樣，這個(gè)時(shí)候我們是不是通常會(huì)使用scrollTop來(lái)解決這一問(wèn)題，今天我們?cè)賮?lái)介紹一種更佳優(yōu)雅的方法scrollRestoration。

history

我們平常在web頁(yè)面中會(huì)用到：history.forward()、history.back()或history.go(1)之類的操作，但history還有另外一個(gè)神奇的屬性 —— 「scrollRestoration 滾動(dòng)恢復(fù)」。

scrollRestoration

History 的接口—— 「滾動(dòng)恢復(fù)屬性」 允許 web 應(yīng)用程序在歷史導(dǎo)航上顯式地設(shè)置默認(rèn)滾動(dòng)恢復(fù)行為

語(yǔ)法

const scrollRestore = history.scrollRestoration

值

• auto：將恢復(fù)用戶已滾動(dòng)到的頁(yè)面上的位置。(默認(rèn)值)
• manual：未還原頁(yè)上的位置。用戶必須手動(dòng)滾動(dòng)到該位置。

文檔上雖然并沒(méi)有明確說(shuō)明誰(shuí)是默認(rèn)值，但從我們的平常使用體驗(yàn)上來(lái)將，這個(gè)默認(rèn)值應(yīng)該就是auto。當(dāng)然我們也可以自行驗(yàn)證，找一個(gè)自己的頁(yè)面在瀏覽器打開(kāi)，然后在控制臺(tái)輸入history。

這里我們就能看到history.scrollRestoration的默認(rèn)值就是auto。

所以也就是說(shuō)如果瀏覽器支持history.scrollRestoration并且值為auto則會(huì)默認(rèn)的滾動(dòng)恢復(fù)行為，如果設(shè)置為manual則可以取消滾動(dòng)恢復(fù)行為

window.history.scrollRestoration && (window.history.scrollRestoration 
= 'auto')

這種方式相對(duì)于我們常用的scrollTop要更加的優(yōu)雅。

兼容性