CSS

Question

我以此方式将一个新项目添加到我的列表中，就像在此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迭代。

查看屏幕截图

Answer 1

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

ul {
    float: left;
    width: 100%;

ul的li脱离了ul，因为它们上面留有浮子。通过为父母提供一个浮动的宽度和100％的宽度，孩子将被保留在其中，而ul将具有一个高度。

Javascript

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

现在，随着css的更改，您可以基于ul的高度进行滚动，从而准确反映出您具有溢出y的元素的滚动距离。