javascript - 如何使具有动态内容的 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 文档。

现场小提琴示例