javascript - 如何使具有动态内容的div自动滚动到底部？

我四处搜寻，找到了一些解决此问题的方法，但是在我的情况下似乎都没有解决方法。我尝试过将隐藏的输入滚动到底部

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

我试过了

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

和其他一些。这是我的情况

我有一个聊天室（http://novaplasm.topiacloud.com/Chat）。当您键入任何内容时，它会使用Knockout将其输入到div“邮箱”中。每次输入新内容时，它都会附加它。我要这样做，以便您始终可以看到最新消息，而不必滚动自己。我似乎一辈子都不会这样做。提前致谢！

最佳答案

首先获取对您的邮箱和聊天消息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文档。

Live fiddle example