如何滚动到 div 底部（聊天） - 同步答案

【问题标题】：How to Scroll to bottom of div (chat) - synchronously如何滚动到 div 底部（聊天） - 同步
【发布时间】：2018-11-03 03:08:06
【问题描述】：

我正在尝试创建一个聊天应用程序。每次用户发送新消息时，新消息都会附加到 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() 函数创建一个承诺，让我只有在数组得到更新后才调用滚动方法？

谢谢你，

【问题讨论】：

在底部创建一个虚拟元素并滚动到该元素

标签： javascript node.js vue.js

【解决方案1】：

您可以使用Vue.nextTick(callback) 在推送新消息后等待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;
})

【讨论】：