解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

2021-10-11

一、问题描述：

文案文字超出包裹它的div边界，将div设置为overflow-y:scroll,并下拉到最底部：

解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

文章图片

点击切换周期，会请求相应周期这方面的数据；

解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

文章图片

发现文案位置和上一次保持一致：

解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

文章图片

二、分析问题

当新周期选择后，新旧虚拟dom会进行对比，然后更新真实dom。虚拟div为父节点不变，新虚拟文本节点会替换真实dom的文本节点。但div未发生改变，所以滚动进度条仍停留在在上一次位置。

解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

文章图片

三、解决问题

给div增加一个自定义属性：

【解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题】

解决vue数据刷新后，若设置overflow:scroll,下拉进度条仍停留在上次位置问题

文章图片

在请求完数据后增加： this.freshKey = new Date().getTime() ，这样div的class属性新旧变得不一样，达到刷新dom的作用。

推荐阅读

上一篇：Java 性能优化的 9 个工具，你知道几个（）

下一篇：如何发现|如何发现 Kubernetes 中服务和工作负载的异常