Question

我在Stackoverflow上找到了一个解决方案，但我无法正常工作

...
<div class="panel-body">
    <ul id="mtchat" class="chat">

    </ul>
</div>
...

这里是js，它添加了新的<li>，但滚动不起作用

worker();

function worker() {

  // ajax request deleted

  updateChat();
  setTimeout(worker, 1000);

};

function updateChat() {

  $('#mtchat').append('<li class="right clearfix">Hallo</li>');

  var height = $('#mtchat')[0].scrollHeight;
  var dheight = $('#mtchat').height();
  var scrolling = height - dheight;
  $('#mtchat').scrollTop(scrolling);
  console.log('height:'+height);
  console.log('dheight:'+dheight);

}

在控制台中，即使溢出开始，我也可以看到scrollHeight和Height始终相同。

我做了JsBin

Answer 1

选中此jsfiddle

在这里，worker()方法只被调用一次，而这只是为我们设置的东西：

添加一个“Hallo”作为欢迎消息，仅一次
为button点击
更新聊天框的计时器

代码：

function worker() {

  $('#mtchat').append('<li class="right clearfix">Hallo</li>');
  // ajax request deleted
  setTimeout(updateChat(), 1000);
  $("#btn-chat").on("click", function(){
    var text = $('#btn-input');
    $('#mtchat').append('<li class="right clearfix">'+ text.val() +'</li>');
    text.val('');
  });
};

function updateChat() {
  var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height(); 
  $('#mtchat').scrollTop(height);
}

Answer 2

您的JS Bin不包含头部的jquery库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

在head标记

中包含上述内容

还应修复以下行：

var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height();

到

var height = $('#mtchat')[0].scrollHeight - $('#mtchat').height();

$('#mtchat')[0].scrollHeight是编写document.getElementById('mtchat').scrollHeight

的jquery方式

因为你在其他地方使用jquery。

Answer 3

我现在已经想通了。 .panel-body旨在overflow，但我检查了scrollHeight中<ul>的{{1}}。

聊天框滚动到底部

3 个答案: