前端小技巧（一）：局部列表增加数据（历史消息），导致页面抖动或跳动
在做聊天类应用的时候，往往有一个分批加载历史消息的功能，需求一般是：
1. 假设单次最多30条，当历史消息小于30条时不做任何处理 。
2. 假设单次多余30条时，用户滚动聊天区域，距离顶部一定距离，就需要从本地加载历史数据（速度很快）；
3. 将新数据插入列表
4. 保持用户看到的内容不变（也就是我本来看到的区域最顶部的消息，在历史消息插入后位置不变），不然会影响体验
如果新数据插入后，没有处理滚动，消息的scrollTop不会变，往往是会跳到新插入消息的最上面那几条，直接跳过了一大段消息，一般直接想到的有两种方法解决：
a. 利用scrollToview,将元素置顶，
b. 计算元素的scrollTop，并进行设置；
但是a方法，在不是全局滚动，而是局部滚动时（聊天窗口不是全屏），会造成整个body抖动甚至偏移，尤其是移动端
而b方法需要一定的延时，也可能出现些许的抖动，dom计算操作都需要时间的
*****
可以试试这样做，在拿到新的历史数据时，禁用列表容器的滚动，（因为滑到顶部时，会有加载提示），插入新的消息，setTimeout(()=>启用滚动,0)，即元素更新后立刻启用滚动，不需要计算效率很高，几毫秒的禁用滚动，用户基本难以察觉，毕竟到顶了会下意识的在消息加载完成后再划一划。
投递建信金科等公司10个岗位 >