如何将div元素作为聊天窗口滚动到底部？

Question

我为我的问题准备了jsFiddle：

我正在尝试在多人游戏中使用（黄色）div元素进行聊天。

不幸的是，div不会滚动到我append()的最近一行。

$('#chatBtn').button().click(function(e) {
  e.preventDefault();

  var str = $('#chatInput').val();
  $('#chatInput').val('');
  $('#chatDiv').append('<br>' + str);

  var h = $('#chatDiv').attr('scrollHeight');

  //$('#chatDiv').scrollTop(h);

  $('#chatDiv').animate({ // DOES NOT SCROLL TO DIV BOTTOM, WHY?
    scrollTop: h
  }, 1000);
});

$('#chatInput').on('input', function(e) { // ENABLES/DISABLES BUTTON, WORKS OK
  var str = $('#chatInput').val();
  $('#chatBtn').button(str.length > 0 ? 'enable' : 'disable');
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
div#chatDiv {
  margin: 0 auto;
  background-color: yellow;
  width: 400px;
  height: 100px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="chatDiv"></div>

<p align="center">
  <input id="chatInput" type="text" size="40" />
  <button id="chatBtn" disabled>Send</button>
</p>

请在chatInput中输入4-5个字，然后每次点击chatBtn - 您会看到问题：未显示底线，chatDiv - 元素不是向下滚动。

Answer 1

以下行没有给出高度

var h = $('#chatDiv').attr('scrollHeight');

用

替换上面的代码行

var h =$('#chatDiv').prop('scrollHeight');

您可以在按钮上单击

，而不是使用输入事件

$(document).ready(function() {
     $('#chatBtn').click(function(e) {
         e.preventDefault();   
         var str = $('#chatInput').val().trim();
          if(str !== ''){
              $('#chatInput').val('');
              $('#chatDiv').append('<br>' + str);
              var h =$('#chatDiv').prop('scrollHeight');
              $('#chatDiv').animate({
                 scrollTop: h
              }, 1000);
           }
        });
   });

如果删除输入事件，请不要忘记从按钮中删除已禁用。