如何让滚动条始终位于底部？

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

假设你的 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;

演示

Answer 4

那就是 ::

messageBody.lastChild.scrollIntoView();

//用于初始滚动到底部位置。

---

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

Answer 5

给你。遵循这个概念。

$('#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 6

这是基于 Jim Halls 解决方案

的解决方案

let i = 0
function addDivs(){
  var cont = document.getElementsByClassName('container')[0];
  
  var str = `<div class="inner">Hi'${i}'</div>`
  
  cont.innerHTML = str + cont.innerHTML;
}

setInterval(function(){
  i++
  addDivs();
}, 2000);

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

<div class="container">
</div>

Answer 7

已经是2023了，您现在就可以简单地使用

Element.scrollIntoView()

！检查 MDN 文档。

var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();

——-

6 月 11 日更新

对于那些反对这个答案的人，请确保您有一个固定在滚动区域底部的元素作为目标，并在每次内容更新时调用此函数。另外，请检查MDN文档并确保您的浏览器符合要求！