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

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) {&nbsp; div.scrollTop = div.scrollHeight}const messages = document.querySelector("#messages")scrollToBottom(messages)

Answer 3

在 javascript 部分试试这个：const&nbsp;messageBox&nbsp;=&nbsp;document.querySelector("#messages"); messageBox.animate({scrollTop:messageBox.scrollHeight});如果这失败了，那么使用这个：const&nbsp;messageBox&nbsp;=&nbsp;document.querySelector("#messages"); messageBox.animate({scrollTop:messageBox[0].scrollHeight});其中之一会起作用。检查并给我反馈是否有效。