Question

<div id="Content">
  <div id="chatContent" id="console">
    <h4 style="text-align: center; color: rgb(130, 224, 255);">Messages</h4>
    <div id="chat" class="scroll">
    </div>
      <form id="send_message" action="">
        <input id="message" autocomplete="off" /><button>Send</button>
      </form>
  </div>
  <div id="Connected">
    <h4>Users</h4>
      <div id="Users">
      </div>
  </div>
</div>      

 $(document).ready(function(){
    var socket = io.connect();
    var $nickForm = $('#SetName');
    var $nickError = $('#NameError');
    var $nickBox = $('#Nickname');
    var $users = $('#Users');
    var $messageForm = $('#send_message');
    var $messageBox = $('#message');
    var $chat = $('#chat');
    var $console = $('#console');


    $messageForm.submit(function(e){
      var height;
      e.preventDefault();
      socket.emit('send message', $messageBox.val());
      height = $chat.height();
      $console.scrollTop(height);
      $messageBox.val('');
    });

这是一个socket.io聊天应用程序，我希望消息保持在视图中，而不必向下滚动以查看该人说的内容。我尝试的一切都没有奏效。一切正常，那么当文本被添加到＆＃34;聊天＆＃34;时，滚动条不会强行关闭。

例如：

当有人在网站上键入消息时，它只会附加到屏幕上。我需要它附加到屏幕以及滚动视图继续保持在聊天的底部。截至目前，消息显示在屏幕上，用户必须手动向下滚动才能看到它们。

Answer 1

试试这些：

＆＃13;

$console.animate({
  scrollTop: $console.get[0].scrollHeight
}, 500)

＆＃13;

它有一个动画功能，向下滚动0.5秒。

如何在添加文本时自动向下滚动滚动视图？

1 个答案: