如果某些内容已添加到 `div`，则滚动到内容的底部

Question

我有一个 div，如果某些内容已添加到div.这个 div 有动态添加的内容，需要一直向下滚动。现在，如果用户决定向上滚动，那么如果添加了新内容，无论滚动条的当前位置如何，我都希望它跳回到底部，它不应该等待用户再次向下滚动，比如在大多数聊天应用程序中。我将如何着手创建它？我已经尝试了下面的代码，但它似乎没有用。let tempCounter = 0;var msgdiv = document.getElementById("messages");function addContent() {  msgdiv.innerHTML +=    "Long long content " + tempCounter++ + "!<br/>";/***  msgdiv.scrollTop = msgdiv.scrollHeight - msgdiv.clientHeight;  ***/    msgdiv.scrollTop = msgdiv.scrollHeight;}setInterval(function() {  addContent();}, 500)html,body {  height: 100%;  margin: 0;  padding: 0;}.h-100 {  height: 100%;}.flex-column {  flex-direction: column;}.d-flex {  display: flex;}.mh-100 {  max-height: 100%;}.chat-messages {  flex: 1;  height: 100%;  overflow: auto;  display: flex;  flex-direction: column-reverse;}.bg-white {  background-color: #fff;}.chat-messages-text {  display: flex;  justify-content: flex-start;}<div class="d-flex flex-column h-100">  <div class="chat-messages bg-white">    <div class="chat-messages-text" id="messages">    </div>  </div>  <div class="chat-input bg-warning ">    <textarea class="form-control" id="inputs" rows="3"></textarea>    <button type="button" onclick="addContent()" class="btn btn-primary mb-2"> Send Message </button>  </div></div>

Answer 1

如果你使用

msgdiv.scrollIntoView(false);

它会将滚动视图保持在元素的底部。（true 会将其保留在顶部。）

Answer 2

您可以使用Mutation Observer API 来检测您的 div 的变化，然后您可以触发滚动到底部