滾動條
常見於移動端 App 在滾動點選進入的時候
問題描述
當我們在開發 web app 的時候，經常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然後返回列表頁面的時候，很難去還原滾動條的狀態，無法記住進來時候的位置。
以前我嘗試過很多方法：
- 有 vue-router 自帶的 scrollBehavior，需要記住 scrollTop，然後還原，但是管理這個 scrollTop 顯得很麻煩，有的時候還不容易取值
- 還有使用純 CSS 的方式，在列表頁面放置一個 router-view,詳情頁面利用 position 和 z-index 覆蓋列表頁面，返回後直接顯示的就是原來的列表頁面，這個必須把各層頁面路由預先配置好，不然就會顯示混亂了，並且同一個頁面出現在不同的子路由下，需要配置多次，比如商品詳情需要配置在很多個地方，造成冗餘
以上解決方案都不理想
解決方案
後來我參考 keep-alive 開發了 vue-page-stack 來儲存 Vue 頁面的棧，即 Vue 中的虛擬 dom，但是滾動條的問題仍然沒解決。因為虛擬 dom 沒有記錄各個元件的滾動狀態，所以無法恢復。
在我使用 cube-ui 的時候發現，使用這個元件庫裡面的滾動容器，是可以還原出滾動條的，進一步發現是黃軼老師的 better-scroll 的原因。
通過檢視 bs 的原始碼發現，原來是 bs 的內部實現不是原生滾動，而是記錄一些滾動的資訊，其中最重要的就是 x 和 y，也就是滾動的值，自己實現了一套滾動行為通過 transform 去實現，在還原虛擬 dom 的時候，滾動的資訊也被還原了。
最終就是 vue—page-stack + bs 可以完美實現頁面棧的還原
下拉載入
這個問題多見於訊息記錄等查詢，在小程式中也會這遇到這樣的問題
問題描述
絕大多數滾動場景都是上拉載入，上拉載入的時候，載入的內容在滾動區域的下方出現，載入之後，我們將資料新增到列表，由 Vue 等負責渲染新載入的內容，我們繼續上拉就可以繼續滾動檢視。
但在我們的場景下，在某一會話中翻閱訊息記錄的時候，是下拉載入更多訊息，載入後，繼續下拉慢慢滾動檢視。這就導致了一個很嚴重的問題：下拉載入後出現的內容在滾動區域的上方，不做任何處理的話載入後會直接跳到新載入內容的最上方，因為滾動距離沒變，這就出問題了，和我們想實現的不一致。
解決方案
也想了很多的方法，包括計算新增加訊息的總長度，然後滾回來，但是訊息的型別和高度不一致，計算會有誤差。
最終想到的處理辦法就是：
- 通過介面獲取到載入資訊後首先標記（使用 shouldScroll 標記）後端返回的第一條資訊，也就是載入後我們的視角要看到的新內容
- messageList 更新後，Vue 會更新資料和檢視，這時候頁面 dom 被更新了
- MessageItem 元件 mounted 後，這時候已經完成了檢視的渲染，通過檢查標記（shouldScroll）,通知父容器滾動到剛才標記的位置，也就是載入的第一條資訊處，這樣也就把渲染和滾動做到一起了
以上兩個問題在下圖均有體現，效果還可以，如下：
以上內容在我的即時通訊應用客戶端中均有體現，歡迎檢視原始碼