Question

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

<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);

Answer 1

您可以将每个<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>

Answer 2

您应该使用$('.messages')[0].scrollHeight代替$('.messages').scrollHeight

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

.messages {
width: 200px;
background: red;
}

li {
height: 1000px;
}

<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: 650px">
<li></li>
</ul>

添加新邮件时向下滚动

2 个答案: