Javascript Div不会自动滚动以显示新消息

我使用socket.io创建了一个聊天室。聊天功能正常，但my message div不会自动滚动显示新消息。用户必须手动滚动。让我进一步解释

我将此代码添加到我的项目中：

$('.chatbutton').click(function(){
$display = $('#box');
$display.animate({ scrollTop: $display[0].scrollHeight }, 'fast');
});

这意味着当用户单击聊天按钮并发送新消息时，div将自动向下滚动到新消息。这是可行的，但是当我打开第二个浏览器窗口并打开第二个聊天室时，问题就出现了。结果是，当第二个聊天室被滚动到最近的消息时，当我在第一个聊天室中键入内容时，我必须反复滚动第二个聊天室以查看传入的新消息

所以本质上的问题是新消息到达，但是其他用户如果不手动滚动他们的聊天室就看不到它们。即使他们的聊天室显示的是最近的消息，他们也必须不断滚动才能看到新消息

我和朋友们一起测试聊天室，我们不得不反复手动滚动以查看新消息。因此，这是一个问题。如何调整上述代码以解决此问题

让我提一下，上面的代码允许用户在收到新消息时向上滚动并查看聊天历史记录，我希望保留该功能。但是，当该用户向下滚动到聊天室中的最新消息时，我希望聊天室在收到新消息时自动滚动。（基本上就是聊天室的运作方式。）

我尝试使用interval解决了我的问题。然而，它给我带来了更多的问题，因为它阻止了用户向上滚动

      window.setInterval(function() {
      var elem = document.getElementById('box');
      elem.scrollTop = elem.scrollHeight;
    });

那么，有没有办法调整上面的代码来解决这个问题呢

这是我的聊天室html:第一个div是聊天室。第二个是信息积累的地方。然后，我创建了一个表单，它有两个输入，用于键入消息并发送

<div id=box class="chatroom">
    <div class="chat" id="chat"></div>
</div>
<form id="messageForm">
  <div class="form-group">
    <input required="required" placeholder="Enter your message here" class="chat-message" id="message"/>
    <input class="chatbutton" type="submit" value="Send"/>
  </div>
</form>

让我知道，如果有任何更多的代码，你们想我添加。也请原谅，如果这看起来像一个重复，但我已经用尽我所有的来源。如果是的话，请给我指出正确的方向。如果不是，请引导我找到解决方案

我已经解释清楚了一切，因为我真的很想在这方面得到帮助

先谢谢你

-JJ

更新这是我为socket.io编写的脚本

<script>
    $(function(){
        var socket = io.connect();
        var $messageForm = $('#messageForm');
        var $message = $('#message');
        var $chat = $('#chat');


        $messageForm.submit(function(e){
            e.preventDefault();
            socket.emit('send message', $message.val());
            $message.val('');

        });

        socket.on('new message', function(data){
            $chat.append('<div style="background-color:#fff;><strong style="color:#000">'+data.user+'</strong>: '+data.msg+'</div>');

         $chat.animate({ scrollTop: $chat[0].scrollHeight }, 'fast');

        });

    });
</script>

$（函数（）{
var socket=io.connect（）；
var$messageForm=$（“#messageForm”）；
var$message=$（“#message”）；
var$chat=$（“#chat”）；
$messageForm.submit（函数（e）{
e、 预防默认值（）；
emit（'send message'，$message.val（））；
$message.val（“”）；
});
socket.on（'new message'，函数（数据）{
$chat.append（'我的答案
您可能将滚动脚本放在了错误的事件中，因此它将在聊天真正出现在div中之前运行

$display.animate（{scrollTop:$display[0].scrollHeight}，'fast'）；

在新聊天被附加到div之后，尝试将其放在用于加载新聊天的函数的最后一行。不在$（'.chatbutton'）中。单击事件

关于设定间隔
您缺少第二个参数：

window.setInterval(function() {
      var elem = document.getElementById('box');
      elem.scrollTop = elem.scrollHeight;
});

应该是：（当您希望每1秒调用一次函数时）

我的回答
您可能将滚动脚本放在了错误的事件中，因此它将在聊天真正出现在div中之前运行

$display.animate（{scrollTop:$display[0].scrollHeight}，'fast'）；

在新聊天被附加到div之后，尝试将其放在用于加载新聊天的函数的最后一行。不在$（'.chatbutton'）中。单击事件

关于设定间隔
您缺少第二个参数：

window.setInterval(function() {
      var elem = document.getElementById('box');
      elem.scrollTop = elem.scrollHeight;
});

应该是：（当您希望每1秒调用一次函数时）

如果您正在使用Express并试图自动滚动由于通过socket.io broadcast/emit events发送的其他消息而增大的文件，此解决方案应该适合您


>$（文档）.ready（函数（）{
>var$scroll_down_chat=$（“#留言板”）；

在每个“发布新消息”广播事件上执行滚动功能
>io.on（“发布新消息”，函数（数据）{
>>>$（“#留言板”）。追加（“”+data.new_message+”
”）；
>>$scroll\u down\u chat.animate（{scrollTop:$scroll\u down\u chat[0].scrollHeight}，'fast'）；
}）；
}

如果您正在使用Express并试图自动滚动由于通过socket.io broadcast/emit events发送的其他消息而增大的文件，此解决方案应该适合您


>$（文档）.ready（函数（）{
>var$scroll_down_chat=$（“#留言板”）；

在每个“发布新消息”广播事件上执行滚动功能
>io.on（“发布新消息”，函数（数据）{
>>>$（“#留言板”）。追加（“”+data.new_message+”
”）；
>>$scroll\u down\u chat.animate（{scrollTop:$scroll\u down\u chat[0].scrollHeight}，'fast'）；
}）；
}

没有完全解决我的问题，但它确实解决了大约50%的问题没有完全解决我的问题，但它确实解决了大约50%