Vue.js实现微信式聊天记录向上滚动加载，滚动条位置不变
本文介绍如何在Vue.js中构建类似微信聊天记录的向上滚动加载功能，避免滚动条自动回滚到顶部。
现有代码已实现向上滚动加载更多记录，但新数据加载后，滚动条会回到顶部。为了解决这个问题，我们需要记录滚动位置，并在加载新数据后恢复该位置。
改进后的代码如下：
- {{ item }}
关键改进：
立即学习“前端免费学习笔记（深入）”；
- 添加
prevScrollTop变量记录之前的滚动条位置。 - 在
handleScroll中，每次滚动时都更新prevScrollTop。 - 加载新数据后，使用
nextTick确保 DOM 更新完成，然后计算并设置新的scrollTop值，使其保持在加载数据前的相对位置。target.scrollTop = scrollHeightAfter - scrollHeightBefore + prevScrollTop;这行代码计算了需要调整的滚动距离，确保滚动条位置不变。
通过这些修改，实现了在向上滚动加载新数据时，滚动条位置保持不变的效果，提升用户体验。 代码也使用了更简洁的 Array.from 方法生成数字序列。
