最近做項目遇到一個問題，就是Vue滾動不固定，網上找了一些資料，說下 vue 固定滾動位置的處理辦法.

問題描述:

通常見于 列表頁List -> 詳情頁Detail 的情況, 從列表的某一項x 進入到詳情頁, 再返回的時候, 希望列表的位置固定在x, 而不是回到頂部了.

vue-router 里面是有一個 scrollBehavior 的, 但是這個玩意只能在 history 模式下面使用, 而我用的 hash 模式.

所以我們要自己實現嘛, 思路簡單:List 里面監聽滾動, 記錄滾動位置 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 打印出來, 發現是 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