滚动条
常见于挪动端 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）,告诉父容器滚动到方才标记的地位，也就是加载的第一条信息处，这样也就把渲染和滚动做到一起了
以上两个问题在下图均有体现，成果还能够，如下：
以上内容在我的即时通讯利用客户端中均有体现，欢送查看源码
现已部署上线，欢送体验客户端和治理端