我在div元素中有一個滾動條，最初它的位置是頂部。每當我向div元素添加一些文本時，滾動條都不會移動。有什么方法可以使div元素位置的滾動條總是在底部，并且每當我向div元素添加一些文本時，滾動條也會自動轉到底部？

這是我的div元素:

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

和CSS類

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

我需要的是，最初滾動條的位置應該在底部。

同樣，當我單擊發送消息時，我將消息添加到div元素“messageBody”中。此時，滾動條應該再次向下。

這是我的滾動條的當前樣式

我希望永遠如此

提前感謝。

如果我沒理解錯你想要什么的話，像這樣的東西應該會做你想要的。

用您的聊天消息容器Id替換getElementById()中的messageBody。

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

這將把消息容器滾動到底部。 因為滾動位置是以像素而不是百分比記錄的，所以默認情況下，當您向容器中添加更多元素時，滾動位置不會改變。

在將新消息添加到聊天消息容器中之后，請執行此操作。

假設你的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

射流研究…

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

演示

給你。遵循這個概念。

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

那就是::message body . last child . scrollintoview()；//初始滾動到底部位置。

附注:在頁面加載之后，這個命令應該由您的消息處理程序在消息更新時調用。

現在已經是2023年了，你可以直接使用Element.scrollIntoView()了！檢查MDN文檔。

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

——-

6月11日更新

對于那些否決這個答案的人，請確保你有一個固定在滾動區底部的元素作為目標，并在每次內容更新時調用這個函數。此外，請檢查MDN文檔并確保您的瀏覽器符合要求！