一个页面要展示200条数据，每条数据都是一个ckeditor富文本编辑器，并且每条记录的高度不一致，页面非常卡。

优化方式是使用虚拟列表的逻辑，页面始终展示10条数据。

当页面滚动到底部时，底部增加2条数据，顶部减少2条。滚动到顶部则相反操作。

这样可以保证永远都是10条，但是因为高度不一致，所以数据条目变更时，页面会向上多滚动一些，或向下多滚动一些，不会定位到尾部。

解决方式是当是数据变更后，控制滚动条滚动到指定的位置。

具体代码逻辑：

1.外围有个div，固定高度，使滚动条出现

2.监听页面滚动到底部，底部加载2条，顶部减去2条

因为vue框架使用element，所以判断是否滚动到底部使用了 InfiniteScroll 无限滚动

3.监听滚动到顶部，在外围div上添加 @scroll 方式，判断距离顶部高度

4.控制滚动条移动到指定位置