建站
咨詢
售后
建站咨詢
新聞中心
前言
通常我們在瀏覽web頁面時，當(dāng)瀏覽到某個位置跳去了其它頁面瀏覽后再回到開始時的那個頁面時，瀏覽器會幫我們重新定位到我們離開頁面時的位置，對于絕大多數(shù)場景來說，這確實是一個非常好的體驗設(shè)計!但有時候我們往往不想這樣，這個時候我們是不是通常會使用scrollTop來解決這一問題，今天我們再來介紹一種更佳優(yōu)雅的方法scrollRestoration。
成都創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧強企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站設(shè)計，寧強網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
history
我們平常在web頁面中會用到：history.forward()、history.back()或history.go(1)之類的操作，但history還有另外一個神奇的屬性 —— 「scrollRestoration 滾動恢復(fù)」。
scrollRestoration
History 的接口—— 「滾動恢復(fù)屬性」 允許 web 應(yīng)用程序在歷史導(dǎo)航上顯式地設(shè)置默認(rèn)滾動恢復(fù)行為
語法
const scrollRestore = history.scrollRestoration
值
- auto：將恢復(fù)用戶已滾動到的頁面上的位置。(默認(rèn)值)
- manual：未還原頁上的位置。用戶必須手動滾動到該位置。
文檔上雖然并沒有明確說明誰是默認(rèn)值，但從我們的平常使用體驗上來將，這個默認(rèn)值應(yīng)該就是auto。當(dāng)然我們也可以自行驗證，找一個自己的頁面在瀏覽器打開，然后在控制臺輸入history。
這里我們就能看到history.scrollRestoration的默認(rèn)值就是auto。
所以也就是說如果瀏覽器支持history.scrollRestoration并且值為auto則會默認(rèn)的滾動恢復(fù)行為，如果設(shè)置為manual則可以取消滾動恢復(fù)行為
window.history.scrollRestoration && (window.history.scrollRestoration
= 'auto')
這種方式相對于我們常用的scrollTop要更加的優(yōu)雅。
兼容性
分享標(biāo)題：如何優(yōu)雅地取消頁面滾動恢復(fù)行為？
文章出自：http://www.dlmjj.cn/article/dphegsi.html
