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

【问题标题】：How to make a div with dynamic content automatically scroll to the bottom?如何使具有动态内容的 div 自动滚动到底部？
【发布时间】：2013-08-05 17:43:00
【问题描述】：

我用谷歌搜索并找到了一些解决这个问题的方法，但它们似乎都不适用于我的情况。我已经尝试隐藏输入滚动到，它停留在底部

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

我试过了

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

还有其他一些。这是我的情况

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

【问题讨论】：

$("#postbox")[0].scrollHeight 返回的值是否大于 0？
@Dilantha 我得到“未捕获的类型错误：无法读取未定义的属性 'scrollHeight'”

标签： javascript html autoscroll

【解决方案1】：

首先获取对您的邮箱和聊天消息 div 的引用

   var pbox = $('#postbox');

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

这里的 msg 是你的聊天消息

然后你必须像这样使用'animate'方法向下滚动

  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

【讨论】：

如何自定义它以在我当前的代码中工作？聊天 div 是我的“帖子”类还是我的“帖子”类？转到网站并检查元素以查看哪个是哪个。