如何使具有動態內容的div自動滾動到底部？

Question

我四處搜尋，找到了一些解決此問題的方法，但在我的情況下似乎都沒有用。 我嘗試過將隱藏的輸入滾動到底部

document.getElementById('scrollToMe').scrollIntoView();

我努力了

$("#postbox").scrollTop($("#postbox")[0].scrollHeight);

和其他一些。 這是我的情況

我有一個聊天室（ http://novaplasm.topiacloud.com/Chat ）。 當您鍵入任何內容時，它會使用Knockout將其輸入到div“郵箱”中。 每次您輸入新內容時，它都會附加它。 我要這樣做，以便您始終可以看到最新消息，而不必滾動自己。 我似乎一生都無法做到這一點。 提前致謝！

Answer 1

首先獲取對您的郵箱和聊天消息div的引用

   var pbox = $('#postbox');

   var chat_div = $('<div></div>').attr('class', 'chat_msg').text(msg);

msg是您的聊天消息

然后您必須使用“動畫”方法向下滾動

  chat_div.appendTo(pbox);

   var height = pbox.scrollTop() + pbox.height() +  $('#postbox').filter('.chat_msg:last').scrollTop();

   pbox.animate({'scrollTop' : height}, 1000);

此處的動畫發生時間超過1秒。

有關jQuery方法的更多詳細說明，請參考jQuery文檔。

現場小提琴示例