Question

我正在设置scrollTop动画，以保持聊天视图在底部显示最新消息。

在加载会话和发送消息后，我会触发以下方法：

loadMessages(matchId) {
    ...
    // ..filling the messages array..
    this.scrollToBottom();
    ...
}

sendMessage(matchId) {
    ...
    // ..updating the messages array..
    this.scrollToBottom();
    ...
}

scrollToBottom() {
    const div = document.getElementById('contentArea');
    div.scrollTop = div.scrollHeight;
}

chat.css：

.contentArea {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 90%;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.267);
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: visible;
}

我需要单击loadMessages()两次，以使滚动发生，发送消息时，同样的事情，我需要发送两条消息，以使内容滚动到两条消息中的第一条。 / p>

看来我必须两次document.getElementById('contentArea')才能获得正确的值。

我想我第一次调用该函数太早而无法获得正确的值。

我该怎么办？谢谢！

Answer 1

我认为这里正在发生的事情是您正在操纵DOM并试图立即读取更新的DOM值。

应用于DOM元素的更改不会立即应用，在一个执行周期内对DOM所做的所有更改都会被收集并一次重涂。

因此，您需要等待重新绘制完成，然后才能尝试读取元素的更新尺寸。

requestAnimationFrame是在每次重新绘制之前执行的方法，您可以使用它来计算下一次重新绘制之前的scrollHeight，即，它将在当前重新绘制之后被调用，并且您将获得正确的{{ 1}}值

scrollHeight

PS：此解决方案基于以下假设：您是在DOM操作之后直接调用scrollToBottom() { window.requestAnimationFrame(function () { const div = document.getElementById('contentArea'); div.scrollTop = div.scrollHeight; }); }方法，因此我不确定这是否正在发生，因为您没有与您的scrollToBottom通话共享代码。但是根据您的方法名称和注释，我想这就是您遇到问题的原因。

需要两次getElementById才能在Javascript中获得正确的值

1 个答案: