创建新消息/元素时如何自动滚动到div的底部

Posted 2023-05-08

【中文标题】创建新消息/元素时如何自动滚动到div的底部

【英文标题】：How to automatically scroll to the bottom of div when a new message / element is created

【发布时间】：2022-01-17 11:02:14

【问题描述】：

当用户发布新消息时，我想滚动到页面底部，当发布新消息时，它会创建一个看起来像这样的元素（代码是jinja2 格式，但这并不重要，基本上我正在做的是设置消息的样式，并从我的数据库中获取以前的消息（如果有的话），并使用 for 循环显示它们），

<div class="container">
    <div class="jumbotron" id="messages">
        <div class="message_holder">
            % if previous_chat %
            % for i in previous_chat %
            <div style="margin-bottom: 10px; padding: 15px;" class="msg">
                <span>
                    <img src=" url_for('static', filename='images/nyan.gif') "  
                        style="border-radius: 50%;">
                    <b style="margin-left: 8px; font-size: 18px; vertical-align: middle;"> i.user.username </b>
                </span>
                <code style="margin-left: 5px; display: none;"
                    class="time-posted"> i.created_date.strftime("%d %B %Y %X")  GMT</code><br>
                <span style="margin-left: 40px;"> i.message </></span>
            </div>
            % endfor %
            % endif %
        </div>
    </div>
</div>

这是我当前的 javascript 这样做，但它只适用于页面刷新，而不是在创建新元素时（我尝试使用 while 循环不断转到消息的底部，但它只是挂起网站)

$("#messages").ready(function () 
  $("#messages").scrollTop($("#messages")[0].scrollHeight);
);

这是消息 jumbotron 的 CSS

#messages 
  overflow-y: scroll;
  margin-top: 3rem;
  margin-bottom: 1rem;
  height: 75vh;
  border: 2px solid gray;
  padding: 25px;
  border-radius: 5px;

提前致谢！

【参考方案1】：

这是你的解决方案，它是一种蛮力，但最好你可以在没有任何外部库的情况下做到这一点

function updateScroll() 
  var element = document.getElementById("messages");
  element.scrollTop = element.scrollHeight;

setInterval(updateScroll, 100); // Update every 100 ms (almost unnoticed)

【讨论】：

这可行，但延迟仍然存在，但我可以解决这个问题，谢谢?