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

您的代码段有两个问题，第一个来自高度：继承，它使div随着父元素一起增长，因此您看到的滚动条是一个父节点（第一个固定高度的父节点（如果有）窗口对象）滚动条，而不是聊天窗口，必须限制div或其父级的高度才能使其正常工作，而且toBottom函数中的比较应该是> =而不是<=（scrollTop属性是数字像素从顶部滚动到顶部），但我建议您做些简单的事情（如果只需要转到滚动的最底部，则无需检查或计算位置）：

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

聊天框向下滚动新消息

1 个答案: