聊天框向下滚动新消息

Question

我希望当用户打开聊天或写任何消息时，滚动条向下滚动以查看最新消息。为了完成任务，我找到了以下我想使用的答案。https://stackoverflow.com/a/21067431/12051965

问题是，它对滚动条没有任何影响，它仍然在chatbox的顶部，如果有人能告诉我我做错了什么，我将不胜感激。

​

let chat = document.getElementById("chat-messages-main-div-id");
window.onload = toBottom;

function toBottom() { 
  const isScrolledToBottom = chat.scrollHeight - chat.clientHeight <= chat.scrollTop + 1;
  if (isScrolledToBottom) {
    chat.scrollTop = chat.scrollHeight - chat.clientHeight;
  }
}

.chat-messages-main-div {
  width: 100%;
  height: inherit;
  overflow: overlay;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
  padding-bottom: 15px;
}

<div id="chat-messages-main-div-id" class="chat-messages-main-div" onload="toBottom">
   ....
</div>

​

Answer 1

代码片段有两个问题，第一个问题来自height: inherit，它使你的div与父元素一起增长，所以你看到的滚动条是一个父节点(第一个固定高度的父节点或窗口对象)滚动条而不是chat节点，div或它的父节点的高度必须受到限制才能工作，而且你在toBottom函数中的比较应该是>=而不是<= ( scrollTop属性是从顶部滚动的像素数)，但我建议你使用更简单的方法(如果你只需要转到滚动的最高底部，你就不需要检查或计算位置了)：

function toBottom() { 
  chat.scroll(0, chat.scrollHeight)
}