vue.js - vuejs动态添加数据,滚动条滚动到底部问题

问题描述

问 题

背景

在使用vue动态添加数据时,和聊天的功能比较相似,想的是新来一条信息添加到聊天的底部,然后滚动条滚到底

原因

功能实现比较简单, 但是现在的问题是, 因为vue视图渲染和取DOM之间有一个时间差，导致取DOM的时候，元素还没有渲染出来，所以取到的scrollHeight不足

现象

每次来新数据，底部显示永远是倒数第二条，想看最后一条，需要滚动一下才行，这样显然不行

尝试解决

在滚动代码document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight;加一个延迟，但是会出现别外一个问题，就是滚动条有跳跃

演示地址

http://runjs.cn/code/brhbnugd

最后：求解决方案，谢谢！

解决方案

watch: {
    items() {
        document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight;
    }
}

这篇关于vue.js - vuejs动态添加数据,滚动条滚动到底部问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！