有新消息时向下滚动的聊天

Question

我正在创建网络聊天，但我遇到了一个问题：当他们发送消息时，聊天不会向下滚动。我认为你应该使用 JavaScript，但我对它不是很有经验这是 HTML 代码：    <div class="content-dx">         <div id="messages"></div>         <input type="text" id="messageBox" maxlength="100" placeholder="Type your Message here"/>         <button id="send" onclick="Invio()"><i class="fa fa-paper-plane"></i></button>      </div>“消息”是包含聊天的框，到达的消息CSS代码（如果它有用，但我不认为）：#messages{    background-color:yellow;    margin-bottom: 32px;    height: 86%;    overflow: auto;    text-align: left;    overflow-x: hidden;    margin-left: 5%;    width: 90%;    box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);}有消息的时候怎么让滚动条自动往下掉？我尝试了一些代码，它们可以工作，但是当我想回去重新阅读消息时，它不会让我离开。

Answer 1

messages您可以使用此代码滚动到容器底部

window.scrollTo(0,document.querySelector("#messages").scrollHeight);

您需要将此代码绑定到您的eventwhich 控件接收到的消息。我无法编写那部分代码，因为您的问题缺少事件部分。

Answer 2

function scrollToBottom(div) {

  div.scrollTop = div.scrollHeight

}

const messages = document.querySelector("#messages")

scrollToBottom(messages)

Answer 3

在 javascript 部分试试这个：

const messageBox = document.querySelector("#messages");
messageBox.animate({scrollTop:messageBox.scrollHeight});

如果这失败了，那么使用这个：

const messageBox = document.querySelector("#messages");
messageBox.animate({scrollTop:messageBox[0].scrollHeight});

其中之一会起作用。检查并给我反馈是否有效。