聊天框向下滚动新消息

Question

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

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

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

您的代码 sn-p 有两个问题，第一个来自高度：inherited，这会使您的 div 与父元素一起增长，因此您看到的滚动条是父节点（如果是第一个固定高度的父节点，则任何或窗口对象）滚动条而不是聊天滚动条，div或其父级必须限制其高度才能工作，toBottom函数中的比较也应该是> =而不是

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