Div 不会自动滚动显示新消息答案

【问题标题】：Div does not auto scroll to show new messagesDiv 不会自动滚动显示新消息
【发布时间】：2017-05-06 08:36:20
【问题描述】：

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

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

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

这意味着当用户单击chatbutton 并发送新消息时，div 将自动向下滚动到该新消息。这可行，但是当我打开第二个浏览器窗口并打开第二个聊天室时，问题就来了。发生的情况是，当第二个聊天室滚动到其最新消息时，当我在第一个聊天室中键入时，我必须反复滚动第二个聊天室才能看到收到的新消息。

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

我有我的朋友，我测试了聊天室，我们不得不反复手动滚动才能看到新消息。所以这是一个问题。如何调整上面的代码来解决这个问题？

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

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

      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>

我按照附加聊天中的建议放置了滚动功能，但是现在什么都没有发生。我之前的意思是，每当我发送一条新消息时，div 会自动滚动到该新消息，就像我在上面第二段中所说的那样。但是将滚动功能添加到我的 chat.append 根本没有发生任何事情。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我的回答

很可能你把滚动脚本放在了错误的事件中，所以它会在聊天真正出现在 div 中之前运行

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

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

关于设置间隔

你错过了第二个参数：

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

应该是：（当你想每 1 秒调用一次函数时）

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

【讨论】：

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

【解决方案2】：

如果您正在使用 Express 并尝试自动滚动由于通过 socket.io 广播/发送事件发送的额外消息而增大的大小，则此解决方案应该适合您。

<script type ="text/javascript"> >>$(document).ready(function (){ >> var $scroll_down_chat = $('#message_board');

在每个“post_new_message”广播事件上执行滚动功能 >> io.on("post_new_message", function(data){ >>> $("#message_board").append("<p>"+ data.new_message +"</p>"); >>> $scroll_down_chat.animate({ scrollTop:$scroll_down_chat[0].scrollHeight }, 'fast'); >> }); > } ></script>

【讨论】：