建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細講解有關(guān)如何解決Vue頁面固定滾動位置的問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
問題描述:
通常見于 列表頁List -> 詳情頁Detail 的情況, 從列表的某一項x 進入到詳情頁, 再返回的時候, 希望列表的位置固定在x, 而不是回到頂部了.
vue-router 里面是有一個 scrollBehavior 的, 但是這個玩意只能在 history 模式下面使用, 而我用的 hash 模式.
所以我們要自己實現(xiàn)嘛, 思路簡單:List 里面監(jiān)聽滾動, 記錄滾動位置 pos, 從 Detail 返回到 List 里面的時候, 讀取 pos.
mounted () {
// 讀
setTimeut(function(){
document.body.scrollTop = parseInt(sessionStorage.getItem('pos'));
}, 1000);
// 存
window.onscroll = function () {
sessionStorage.setItem('pos', document.body.scrollTop);
}
}遇見了一個問題:
每次返回 List, 都是直接滾動到頂部, 每次都是, 每次都是! 把 pos 打印出來, 發(fā)現(xiàn)是 0, 而不是我們所存的值. 日了, 明明切換之前還是的, 回來就不是了.
然后發(fā)現(xiàn)了路由每次切換都會觸發(fā) onscroll 事件, 日了狗, 為毛.我都沒有滾動頁面, 為什么會觸發(fā) onscroll 事件。
剛開始懷疑 hash 變化會導(dǎo)致 onscroll 事件的觸發(fā), 所以我就在瀏覽器里面手動輸入了幾個不存在的路由:
/foo /bar
沒有發(fā)現(xiàn) scroll 被觸發(fā), 所以這個嫌疑排出.
然后懷疑 vue-router 里面是不是綁定了 scroll 事件, 沒發(fā)現(xiàn)然后又想, 沒綁定 scroll 事件, 那么修改 scrollTop 值會不會也觸發(fā) scroll 事件.
好吧還發(fā)現(xiàn)新知識點了:
scrollTop 值的改變, 的確會觸發(fā) scroll 事件.
那么我就想, 是不是 vue-router 里面存在修改 scrollTop 值的行為, 也沒有發(fā)現(xiàn).
然后我又想, 數(shù)據(jù)是動態(tài)渲染的, 所以是不是和元素的增刪改查相關(guān)。
元素增加-> 頁面高度變了 -> 頁面高度變化, 也觸發(fā) scroll 事件?
所以我用 vue-cli 新建了項目, 放了兩個沒有增刪改查的路由
然后日了狗的, 我看見從 foo -> bar -> foo, 的時候, foo的滾動條位置還在之前我滾動到的地方.
突然想起來瀏覽器是可以自己記錄滾動條位置的.
是不是瀏覽器干的?
從詳情頁返回到列表頁面, 列表會重新渲染, 時序大概是這樣:
返回列表頁 1
渲染頁面 2
而瀏覽器恢復(fù)滾動條的位置的操作, 是在 1 和 2 之間, 這個時候就出問題了:如果你頁面上面的數(shù)據(jù)都是渲染出來的, 瀏覽器就會發(fā)現(xiàn):
頁面的高度<=屏幕的高度, 不存在滾動條, 此時 document.body.scrollTop = 0;
所以會設(shè)置 document.body.scrollTop = 0
修改了 document.body.scrollTop 觸發(fā)了 scroll 事件, scroll 里面又重寫了 pos
等你數(shù)據(jù)渲染結(jié)束之后, 讀到的就是 0了.
如果發(fā)現(xiàn)你頁面高度大于屏幕高度, 但是頁面高度是 n, 而 pos 的值是: n + x, 比當前頁面的大的 scrollTop 值還大, 這個時候, document.body.scrollTop 的值就會等于 n.
當你的數(shù)據(jù)渲染結(jié)束, 開始定位, 日了, 沒定準.
所以我們要解決這個問題.
當然是想到了 keep-alive, 剛啟用的時候, 發(fā)現(xiàn)的確不錯. 但是同時也發(fā)現(xiàn):
列表項目靠前的, 往返操作的定位都很準, 越往后越不行, 直接拉到底, 再返回發(fā)現(xiàn)定位到的一般都是第二個第三個列表項目.
所以這個就很有意思了, 我大概猜測了一下瀏覽器的滾動位置恢復(fù)行為:
當 hashchange 的時候。拿到當前頁面的 document.body.scrollTop 值, 和自己存儲的滾動條位置。二者取最小的值, 設(shè)置成當前的 document.body.scrollTop 的值, 當使用 keep-alive 的時候, 因為 hashchange 事件處理和頁面渲染是并行的, 所以有時hashchange 拿到的 document 的高度是已經(jīng)渲染過幾個元素的高度, 這個就是為什么定不準的原因.
好吧, 現(xiàn)在的情況是:
keep-alive 定不準, 不可靠, 所以需要我們自己來重新定位.
ok, 1 先綁定 scroll 事件:
var map = {};
window.onscroll = function() {
map[location.hash] = document.body.scrollTop;
}2 再屏蔽掉瀏覽器自動恢復(fù)滾動位置行為帶來的影響
a 在 hashchange 時強制 document.body.scrollTop = 0
b 在 scroll 事件里面, 當 document.body.scrollTop = 0 的時候不做 存操作.
var map = {};
window.onhashchange = function() {
document.body.scrollTop = 0;
}
window.onscroll = function() {
if (document.body.scrollTop) {
// 存
map[location.hash] = document.body.scrollTop;
} else {
// 讀
}
}3 在讀操作里面, 設(shè)置一個定時任務(wù), 去判斷 document.body.scrollTop 的值和你保存的位置是不是相同的
var map = {};
window.onhashchange = function() {
document.body.scrollTop = 0;
}
window.onscroll = function() {
if (document.body.scrollTop) {
// 存
map[location.hash] = document.body.scrollTop;
} else {
var timer = null;
timer = setInterval(function(){
if (document.body.scrollTop == map[location.hash]) {
clearInterval(timer);
} else {
document.body.scrollTop = map[location.hash];
}
}, 20);
}
}到這里實際上已經(jīng)大體實現(xiàn)了, 返回恢復(fù)滾動條位置的功能, 而上面的代碼需要更多的優(yōu)化,
關(guān)于“如何解決Vue頁面固定滾動位置的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當前題目：如何解決Vue頁面固定滾動位置的問題-創(chuàng)新互聯(lián)
地址分享：http://fisionsoft.com.cn/article/gjihj.html
