如何使用django自动向下滚动聊天应用程序

Question

你好，我想自动向下滚动，因为每当我刷新页面时，我总是看到对话的顶部，我指的是开始对话，这是我的代码

<div class="card-body height3 scrollbar" style="margin-bottom: -60px;" id="card-body">

<ul class="chat-list" id="chat-list-id">
<p class="start-conversation">&nbsp;</p>
{% for chat in chats %}
{% if chat.from_user == user.username %}
<li class="out">
<div class="chat-img">
<img alt="avatar" style="height: 48px;width: 48px;" src="{{here.image.url}}">
</div>
<div class="chat-body">
<div class="chat-message">
<h5>Me</h5>
<p>{{chat.messag_body}}</p>
</div>
</div>
</li>       
{% else %}
<li class="in">
<div class="chat-img">
<img alt="avatar" src="{{here.image.url}}">
</div>
<div class="chat-body">
<div class="chat-message">
<h5>{{ chat.from_user }}</h5>
<p>{{ chat.messag_body }}</p>
</div>
</div>
</li>
{% endif %}
{%endfor%}
</ul>
</div>

Answer 1

您可以在jQuery中使用scrollTop函数。就像这样：

$('.chat-body').scrollTop($('.chat-body')[0].scrollHeight);

Answer 2

在页面的底部尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('document').ready(function() {
$('html').animate({scrollTop: document.body.scrollHeight},1);
});
</script>