聊天框滚动到底部

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

检查此

在这里，worker()方法只被调用了一次，作为回报，它只是为我们设置了一些东西：

• 添加一个"Hallo“作为欢迎消息，只有一次
• 为button指派处理程序时单击
• Timer以更新聊天框

代码:

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，但我在div.panel-body中检查了<ul>的scrollHeight。