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

Posted 2023-02-24

【中文标题】如何自动向下滚动 - 与 django 聊天应用程序

【英文标题】：how can I auto scroll down - chat app with django

【发布时间】：2022-01-16 07:32:23

【问题描述】：

你好，我想自动向下滚动，因为每当我刷新页面时，我总是看到对话的顶部，我的意思是 start-conversation，这是我的代码

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

【问题讨论】：

你如何获取数据，分享你的 ajax 代码？

【参考方案1】：

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

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

【讨论】：

它对我不起作用（

@marc-stupid 控制台有错误吗？

【参考方案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>

【讨论】：

也不行

@marc-stupid 这应该可以工作我在我的聊天应用程序中使用相同的。也许你做错了。

实际上，每当出现聊天消息时，我都必须向下滚动 .card-body，但我仍然不知道如何

@marc-stupid 你是如何获取新消息的？