如果某些内容已添加到 `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 的变化，然后您可以触发滚动到底部