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

【问题标题】：Chat that scrolls down when there is a new message有新消息时向下滚动的聊天
【发布时间】：2020-11-23 13:30:27
【问题描述】：

我正在创建网络聊天，但我遇到了一个问题：当他们发送消息时，聊天不会向下滚动。我认为你应该使用 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);
}

有消息时如何让滚动条自动下移？
我尝试了一些代码，它们可以工作，但是当我想回去重新阅读邮件时，它不会让我离开。

【问题讨论】：

我解决了！谢谢大家的回答。

标签： javascript html jquery chat

【解决方案1】：

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

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

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

【讨论】：

嗨！我尝试了代码，但它不起作用......我不知道我是否错了一个事件，我把它放在“content-dx”中，还是应该放在“消息”中？无论如何它对我不起作用:(
@LSnake 当您的代码从您的聊天应用程序收到一条新消息时，会有一个偶数触发器。您应该将此代码包含在您的event 中。您的event 可以是submit 事件，当您单击提交按钮或按Enter 将您的消息提交到服务器时triggers。通过查看您的代码，您已经有了一个提交处理程序Invio()
这样，将事件放在提交中，只有在我提交时才有效？我希望每次有人发送新消息时它都能工作，但是我试过它不起作用代码：/
@LSnake 你应该有一个server 来监听提交的消息。这通常通过在服务器端（您的后端）使用socket.io 来完成。您的后端应该emit 收到消息event，这应该会触发您的滚动。
是的，我用了"emit"，其实奇怪的是它不起作用

【解决方案2】：

function scrollToBottom(div) {
  div.scrollTop = div.scrollHeight
}
const messages = document.querySelector("#messages")
scrollToBottom(messages)

【讨论】：

iv'e 试过你的代码，我前几天做过类似的事情，但它不起作用，因为我把滚动功能放入 div content-dx onchange=myfunc()
此代码将在调用函数时简单地滚动 div。每当有新消息使用您使用的任何机制进入时，您都可以调用它。

【解决方案3】：

在javascript部分试试这个：

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

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

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

其中一个将起作用。检查并给我反馈它是否有效。

【讨论】：

你的问题有一些缺失的部分。所以你应该把这段代码自己放在事件函数中。当有新消息出现/发送时，此代码将自动执行到此消息框的底部。
你能告诉我要放什么活动吗？在哪里，代码不起作用
@LSnake 你在哪里用过这段代码？听着，在发送消息时，您必须将此代码放入 onsubmit 事件中。我不知道你在 JavaScript 代码中做了什么。所以我不能清楚地告诉你必须添加这段代码的地方。