javascript - 附加新消息时向下滚动底部

在这里，我附上我的新消息。

<ul class="chat messages" id="get_AllMsg" style="overflow-y: scroll; height: 650px">

</ul>

在我成功的ajax电话

 var pre_content = $('.messages').html();
    var new_content = '<li class="clearfix">';
    new_content += '<span class="chat-img"><img src="" alt="User Avatar"></span>';
    new_content += '<div class="chat-body clearfix">
    <div class="header"><strong class="primary-font">' + name + '</strong> </div> <p>' + data.message + '</p> </div>';
    var content = pre_content + new_content;
        $('.messages').html(content);

在这里我使用jquery进行滚动，我想在发送新消息时自动滚动至底部

        $('.messages').animate({
            scrollTop: $('.messages').scrollHeight
        }, 1000);

最佳答案

您可以对每个<li>元素的高度求和，然后使用它。这是一个例子：

var ht = 0;
$(".messages li").each(function() {
  ht += $(this).height();
});
$(".messages").animate({scrollTop: ht});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chat messages" id="get_AllMsg" style="overflow-y: scroll; height: 30px">
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
  <li>example</li>
</ul>

关于javascript - 附加新消息时向下滚动底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49965637/