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

一、问题描述:

文案文字超出包裹它的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的作用。

    推荐阅读