如何让滚动条始终保持最低点？

Question

我在div元素中有一个滚动条，最初它的位置是顶部。每当我向div元素添加一些文本时，滚动条都不会移动。有什么办法，div元素位置的滚动条总是在底部，每当我向div元素添加一些文本时，滚动条也会自动转到底部？

这是我的div元素：

<div class='panel-Body scroll' id='messageBody'></div>

和CSS类

.scroll {
            height: 450px;
            overflow: scroll;  
        }

我需要的是，最初滚动条的位置应该是底部。

此外，当我点击发送消息时，我将消息添加到div元素的“messageBody”。那时滚动条应该再次关闭。

这是我的滚动条的当前样式

我希望它永远存在

提前致谢。

Answer 1

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

Answer 2

如果我理解你想要的东西，这样的东西应该做你想要的。

将messageBody中的getElementById()替换为您的聊天消息容器ID。

var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;

这会将消息容器滚动到底部。 由于滚动位置以像素而非百分比记录，因此默认情况下，当您向容器中添加更多元素时，滚动位置不会发生变化。

将新消息附加到聊天消息容器后执行此操作。

Answer 3

你走了。遵循这个概念。

$('#messages').scrollTop($('#messages')[0].scrollHeight);

#chatbox-history {
  overflow: none;
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
#messages {
  overflow: auto;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 200px;
}
#messages div {
  border: 1px solid #e2e4e3;
  margin: 5px;
  padding: 10px;
  background: #fafafa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
  <div id="messages">
    <div>asdjf ;asd</div>
    <div>ajsd fa ;skd f;s</div>
    <div>asdjf ;akjs d;lf a;lksd fj</div>
    <div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
    <div>Wassup?</div>
  </div>
</div>

Answer 4

假设你的html代码是这样的。

<强> HTML

<div id="parentDiv">
  <div class="people">1</div>
  <div class="people">2</div>
  <div class="people">3</div>
  <div class="people">4</div>
  <div class="people">5</div>
  <div class="people">6</div>
  <div class="people">7</div>
  <div class="people">8</div>
  <div class="people">9</div>
</div>

然后像这样包装你的js

<强> JS

var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;

DEMO

Answer 5

那将是:: messageBody.lastChild.scrollIntoView(); // //初始滚动到底部位置。

---

p.s .：页面加载后，消息处理程序应在消息更新时调用此命令。