如何保持滚动条始终在底部？

Question

我在 div 元素中有一个滚动条，最初它是 position 是最上面的。 每当我向 div 元素添加一些文本时，滚动条就不会移动。 有什么办法，div 元素的 position 的滚动条将始终位于底部，每当我向 div 元素添加一些文本时，滚动条也会自动转到底部？

这是我的 div 元素：

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

和 CSS class

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

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

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

这是我滚动条的当前样式

我希望它永远如此

提前致谢。

Answer 1

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

Answer 2

如果我正确理解你想要什么，这样的事情应该做你想要的。

将getElementById() messageBody替换为您的聊天消息容器 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;

演示

Answer 5

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

---

ps：页面加载后，此命令应由您的消息处理程序在消息更新时调用。

Answer 6

现在已经是2023 年了，您现在可以简单地使用Element.scrollIntoView()了！ 检查 MDN 文档。

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