javascript - 聊天框滚动到底部

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”作为欢迎信息，仅一次
• 为按钮点击分配处理程序
• 更新聊天框的计时器

代码:

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