聊天框滾動到底部

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>在div.panel-body 。