javascript - Vuejs有新消息时如何滚动到最新消息

Question

我正在实现一个聊天应用程序，但是当有新消息时我无法处理滚动到底部。我都试过了：

document.getElementById('msg_history').scrollTop = document.getElementById('msg_history').scrollHeight 

和

this.$refs.msg_history.scrollTop = this.$refs.msg_history.scrollHeight

但它仍然不起作用，scrollTop 值没有改变。

这是我的代码： https ://codepen.io/c7n/pen/xxKroNY

谢谢， 钟陈

标签： javascriptvue.js

Answer 1

尝试使用 nextTick(() => {}) 覆盖您的代码，如下所示：

  this.$nextTick(() => {
     document.getElementsByClassName('msg_history')[0].scrollTop = some value;                      
  })    

这将等到所有渲染完成。并检查以下计算顶部位置的方式：

如何保持滚动条始终位于底部？