【问题标题】：jquery - scroll bottom a div after append an elementjquery - 追加元素后滚动底部的div
【发布时间】：2018-06-22 21:42:18
【问题描述】：

我以这种方式将一个新项目附加到我的列表中，就像在这个 codepen 中一样（同样的问题）： https://codepen.io/emilcarlsson/pen/ZOQZaV

HTML

<div id="messages">
    <ul>
    </ul>
</div>

插入时

$('<li id="message-' + i + '" class="msg"><img src="myimage.jpg" alt="" /><p>Example 1</p></li>').appendTo($('#messages ul'));

插入滚动底部div后

$("#messages").animate({ scrollTop: $(document).height() }, "fast");

它运行良好，但仅适用于前 15/20 次迭代。

查看屏幕截图

【问题讨论】：

您的消息元素上是否有任何溢出-y？您的消息元素的高度是否会增长，直到达到最大高度？
您可以将您的代码放在codepen.io 以提供更多帮助吗！？
而不是链接到像 codepen 这样的非现场资源，编辑您的问题并点击 Ctrl+M 或编辑器上的 <> 按钮，以调出现场编辑器来制作一个实时工作示例，或提供源代码。
codepen.io/emilcarlsson/pen/ZOQZaV

【解决方案1】：

一种解决方案是根据 ul 的高度滚动。为此，需要进行一些更改。

CSS

ul {
    float: left;
    width: 100%;

ul 的 li 正在脱离 ul，因为它们上面还有一个浮点数。通过给父级一个向左浮动和 100% 的宽度，子级将保持在其中，并且 ul 将具有一个高度。

Javascript

$(".messages").animate({ scrollTop: $('.messages ul').height() }, "fast");

随着 css 的改变，你现在可以根据 ul 的高度滚动，它准确地反映了你有一个溢出-y 的元素的滚动距离。

【讨论】：