建站
咨詢
售后
建站咨詢
新聞中心
前言
通常我們?cè)跒g覽web頁面時(shí)，當(dāng)瀏覽到某個(gè)位置跳去了其它頁面瀏覽后再回到開始時(shí)的那個(gè)頁面時(shí)，瀏覽器會(huì)幫我們重新定位到我們離開頁面時(shí)的位置，對(duì)于絕大多數(shù)場(chǎng)景來說，這確實(shí)是一個(gè)非常好的體驗(yàn)設(shè)計(jì)!但有時(shí)候我們往往不想這樣，這個(gè)時(shí)候我們是不是通常會(huì)使用scrollTop來解決這一問題，今天我們?cè)賮斫榻B一種更佳優(yōu)雅的方法scrollRestoration。
成都創(chuàng)新互聯(lián)長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧強(qiáng)企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)，寧強(qiáng)網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
history
我們平常在web頁面中會(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ù)行為
語法
const scrollRestore = history.scrollRestoration
值
- auto：將恢復(fù)用戶已滾動(dòng)到的頁面上的位置。(默認(rèn)值)
- manual：未還原頁上的位置。用戶必須手動(dòng)滾動(dòng)到該位置。
文檔上雖然并沒有明確說明誰是默認(rèn)值，但從我們的平常使用體驗(yàn)上來將，這個(gè)默認(rèn)值應(yīng)該就是auto。當(dāng)然我們也可以自行驗(yàn)證，找一個(gè)自己的頁面在瀏覽器打開，然后在控制臺(tái)輸入history。
這里我們就能看到history.scrollRestoration的默認(rèn)值就是auto。
所以也就是說如果瀏覽器支持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)雅。
兼容性
網(wǎng)站名稱：如何優(yōu)雅地取消頁面滾動(dòng)恢復(fù)行為？
標(biāo)題鏈接：http://m.fisionsoft.com.cn/article/dphegsi.html
