vuejs动态添加数据,滚动条滚动到底部问题

Question

背景

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

原因

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

现象

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

尝试解决

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

演示地址

http://runjs.cn/code/brhbnugd

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

Answer 1

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

Answer 2

watch: {
    messages() {
      this.$nextTick(() => {
        let list = this.$els.xx
        list.scrollTop = list.scrollHeight
      })
    }
  }

Answer 3

watch 你的数据 绑定你的 scroll操作

Answer 4

跟题主遇到了同样的问题，用上面几个答案给的watch方法依然解决不了，想来大概是因为watch监测的也只是数据变化，最后用update钩子函数解决了：

updated: function(){
      document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight;
  }

Vue2.x亲测有效。

Answer 5

楼主解决了吗？我遇到了同样的问题，如已解决求分享。