如何滚动到div(聊天)的底部-同步

Question

我正在尝试创建一个聊天应用程序。每次用户发送新消息时，新消息都会附加到一个ul消息列表中。我已经使UL列表可以滚动，并且它正在滚动，我发送了一条消息；然而，它并没有一直滚动到底部。仅供参考：我正在使用Vue.js

这是当前代码：

this.messages.push(this.currentMessage) //adding new message to the list
var div = document.getElementById('chat-list-ul');
div.scrollTop = div.scrollHeight;

不知怎么的，它只是滚动到底部前的一行。在进行一些测试时，我发现这可能是由于滚动函数调用过快造成的，因为如果我插入1s的超时，它将正确滚动。

我的问题是：有没有一种方法可以为array.push((函数创建promise，只允许我在数组更新为新值后调用滚动方法？

谢谢你，

Answer 1

您可以使用Vue.nextTick(回调(在推送新消息后等待DOM更新，然后再触发滚动。像这样的。。

this.messages.push(this.currentMessage) //adding new message to the list
Vue.nextTick(function () {
var div = document.getElementById('chat-list-ul');
div.scrollTop = div.scrollHeight;
})