最近做專案遇到乙個問題，就是vue滾動不固定，網上找了一些資料，說下 vue 固定滾動位置的處理辦法.
問題描述:
通常見於 列表頁list -> 詳情頁detail 的情況, 從列表的某一項x 進入到詳情頁, 再返回的時候, 希望列表的位置固定在x, 而不是回到頂部了.
vue-router 裡面是有乙個 scrollbeh**ior 的, 但是這個玩意只能在 history 模式下面使用, 而我用的 hash 模式.
所以我們要自己實現嘛, 思路簡單:list 裡面監聽滾動, 記錄滾動位置 pos, 從 detail 返回到 list 裡面的時候, 讀取 pos.
mounted () , 1000);
// 存
window.onscroll = function ()
}遇見了乙個問題:
每次返回 list, 都是直接滾動到頂部, 每次都是, 每次都是! 把 pos 列印出來, 發現是 0, 而不是我們所存的值. 日了, 明明切換之前還是的, 回來就不是了.
然後發現了路由每次切換都會觸發 onscroll 事件, 日了狗, 為毛.我都沒有滾動頁面, 為什麼會觸發 onscroll 事件。
剛開始懷疑 hash 變化會導致 onscroll 事件的觸發, 所以我就在瀏覽器裡面手動輸入了幾個不存在的路由:
/foo
/bar
沒有發現 scroll 被觸發, 所以這個嫌疑排出.
然後懷疑 vue-router 裡面是不是繫結了 scroll 事件, 沒發現然後又想, 沒繫結 scroll 事件, 那麼修改 scrolltop 值會不會也觸發 scroll 事件.
好吧還發現新知識點了:
scrolltop 值的改變, 的確會觸發 scroll 事件.
那麼我就想, 是不是 vue-router 裡面存在修改 scrolltop 值的行為, 也沒有發現.
然後我又想, 資料是動態渲染的, 所以是不是和元素的增刪改查相關。
元素增加-> 頁面高度變了 -> 頁面高度變化, 也觸發 scroll 事件?
所以我用 vue-cli 新建了專案, 放了兩個沒有增刪改查的路由
然後日了狗的, 我看見從 foo -> bar -> foo, 的時候, foo的滾動條位置還在之前我滾動到的地方.
突然想起來瀏覽器是可以自己記錄滾動條位置的.
是不是瀏覽器幹的?
從詳情頁返回到列表頁面, 列表會重新渲染, 時序大概是這樣:
返回列表頁 1
渲染頁面 2
而瀏覽器恢復滾動條的位置的操作, 是在 1 和 2 之間, 這個時候就出問題了:如果你頁面上面的資料都是渲染出來的, 瀏覽器就會發現:
頁面的高度<=螢幕的高度, 不存在滾動條, 此時 document.body.scrolltop = 0;
所以會設定 document.body.scrolltop = 0
修改了 document.body.scrolltop 觸發了 scroll 事件, scroll 裡面又重寫了 pos
等你資料渲染結束之後, 讀到的就是 0了.
如果發現你頁面高度大於螢幕高度, 但是頁面高度是 n, 而 pos 的值zhqspolu是: n + x, 比當前頁面的最大的 scrolltop 值還大, 這個時候, document.body.scrolltop 的值就會等於 n.
當你的資料渲染結束, 開始定位, 日了, 沒定準.
所以我們要解決這個問題.
當然是想到了 keep-alive, 剛啟用的時候, 發現的確不錯. 但是同時也發現:
列表專案靠前的, 往返操作的定位都很準, 越往後越不行, 直接拉到底, 再返回發現定位到的一般都是第二個第三個列表專案.
所以這個就很有意思了, 我大概猜測了一下瀏覽器的滾動位置恢復行為:
當 hashchange 的時候。拿到當前頁面的 document.body.scrolltop 值, 和自己儲存的滾動條位置。二者取最小的值, 設定成當前的 document.body.scrolltop 的值, 當使用 keep-alive 的時候, 因為 hashchange 事件處理和頁面渲染是並行的, 所以有時hashchange 拿到的 document 的高度是已經渲染過幾個元素的高度, 這個就是為什麼定不准程式設計客棧的原因.
好吧, 現在的情況是:
keep-alive 定不准, 不可靠, 所以需要我們自己來重新定位.
ok, 1 先繫結 scroll 事件:
var map = {};
window.onscroll = function()
2 再遮蔽掉瀏覽器自動恢復滾動位置行為帶來的影響
a 在 hashchange 時強制 document.body.scrolltop = 0
b 在 scroll 事件裡面, 當 document.body.scrolltop = 0 的時候不做 存操作.
var map = {};
window.onhashchange = function()
window.onscroll = function() else
}3 在讀操作裡面, 設定乙個定時任務, 去判斷 document.body.scrolltop 的值和你儲存的位置是不是相同的
var map = {};
window.onhashchange = function()
window.onscroll = function() else else
}, 20);
} }到這裡實際上已經大體實現了, 返回恢復滾動條位置的功能, 而上面的**需要更多的優化,
具體**見:專案位址
本文標題: 解決vue頁面固定滾動位置的處理辦法
本文位址:
隨頁面滾動顯示 隱藏視窗固定位置元素
0.效果 視窗固定位置顯示元素，當頁面高度大於某高度，並且頁面向下滾動時，顯示該元素 當頁面位置小於某高度，或者頁面向上滾動時，隱藏該元素。已選 span class casecount 0 span span p 2.css p selected case count3.js function v...
vue專案中滾動到某元素位置或者到頁面頂部
跳轉後返回頂部 router.aftereach to,from,next 1.使用a標籤 號 我跳到box1 1 2 上面這一種的缺點是，url會發生改變，會在url最後面加上片段識別符 box2，這樣就改變了url的路徑，這是我們不想看到的。因為再次重新整理的時候回出現問題。當使用 vue ro...
頁面重新整理後保持滾動條的位置
注意 如果頁面資料是ajax獲取展開的，必須要等資料全部載入，dom渲染完成後才能保持滾動條的位置。例如可以settimeout方式設定 等頁面全部渲染後執行設定scrooltop 1.設定滾動條位置到cookie 在即將離開當前頁面 重新整理或關閉 時執行 window.onbeforeunloa...