如何实现Vue中滚动条记忆和下拉加载功能的最佳长尾？

本文共计1229个文字，预计阅读时间需要5分钟。

滚动条+常见于移动端+App在滚动点击进入的页面+问题描述+当我们在开发web app时，经常会遇到一个问题，就是当从可滚动的列表页进入下一级详情页面后，然后返回列表页面+

滚动条

常见于移动端 App 在滚动点击进入的时候

问题描述

当我们在开发 web app 的时候，经常会遇到一个问题，就是当从一个可滚动的列表页进入到下一个详情页面，然后返回列表页面的时候，很难去还原滚动条的状态，无法记住进来时候的位置。
以前我尝试过很多方法：

1. 有 vue-router 自带的 scrollBehavior，需要记住 scrollTop，然后还原，但是管理这个 scrollTop 显得很麻烦，有的时候还不容易取值还有使用纯 CSS 的方式，在列表页面放置一个 router-view,详情页面利用 position 和 z-index 覆盖列表页面，返回后直接显示的就是原来的列表页面，这个必须把各层页面路由预先配置好，不然就会显示混乱了，并且同一个页面出现在不同的子路由下，需要配置多次，比如商品详情需要配置在很多个地方，造成冗余
2. 以上解决方案都不理想
   

解决方案

后来我参考 keep-alive 开发了 vue-page-stack 来保存 Vue 页面的栈，即 Vue 中的虚拟 dom，但是滚动条的问题仍然没解决。因为虚拟 dom 没有记录各个组件的滚动状态，所以无法恢复。

在我使用 cube-ui 的时候发现，使用这个组件库里面的滚动容器，是可以还原出滚动条的，进一步发现是黄轶老师的 better-scroll 的原因。