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

一、问题描述:

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

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

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

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

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

解决vue数据刷新后,若设置overflow:scroll,下拉进度条仍停留在上次位置问题_第3张图片
二、分析问题

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

image.png
三、解决问题

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

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

你可能感兴趣的