Question

我使用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中根本没有发生任何事情。

Answer 1

我的回答

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

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

在将新聊天添加到div之后，尝试将其放在函数的最后一行，用于加载新聊天。不在$（＆＃39; .chatbutton＆＃39;）。点击事件。

关于setInterval

你错过了第二个参数：

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);

Answer 2

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

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

每个＆＃34; post_new_message＆＃34;执行的滚动功能广播事件     >> 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>

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

2 个答案:

我的回答

关于setInterval