Question

我正在尝试创建一个聊天应用程序。每次用户发送新消息时，新消息都会附加到所有消息列表中。我已经使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（）函数创建一个允诺，让我仅在数组使用新值更新后才能调用scroll方法？

谢谢

Answer 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;
})

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

1 个答案: