How to make scrollbar go down when new message is recived with CSS

Question

I just cant figure out a solution for my problem. I have CSS file and HTML, I had to create ChatBot where all the styling is located in CSS.

I am trying to make the Scrollbar go down when all screen is filled with messages and show the newest one. Messages are starting from top and then filling down til bottom.

This is my html main body code a.k.a chat screen body. In textFields are the messages witch is placed there with Jquery from user input. And bot output.

    <div class="chatBox">
        <div class="textFields">
            
        </div>
    </div>

The CSS code is

.chatBox{
    height: 80%;
    padding: 25px;
    overflow-y: auto;
}

.textFields{
    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
    max-width: 100%;
    min-height: 90%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

also the chat bubble css

#msgBubble{
border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
background: #42a5f5;
color: #fff;
margin-left: auto;
max-width: 250px;
max-height: 250px;
padding: 10px 10px;
word-break: break-word;

}

I already tried on ".chatBox" to place (display: flex, flex-direction: column-reverse) didnt work for me. At (".textFields") I tried to place column-revere and that is working, but only up side down, as it just reverses the elements. I thought I could prepend elements to so it would work from top. But still adding column-revere and prepend does the same as now in code.

Answer 1

I think the display: flex;flex-direction: column-reverse; will only work on page load and you will need to add an automatic scroll when a new message is added.

let messages = document.getElementById("messages")
scrollToBottom = () => {
  messages.scrollTo(0, messages.scrollHeight)
}
let message = ' <div class="message">ADDED MESSAGE Lorem ipsum dolor sit amet</div>';
document.getElementById("add-message").addEventListener("click", () => {
  messages.insertAdjacentHTML("afterbegin", message);
  scrollToBottom();
})

#messages,
.message {
  border: 1px solid black;
}

#messages {
  width: 400px;
  height: 120px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
}

.message {
  margin: 5px;
}

<div id="messages">
  <div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et blandit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut pharetra tortor. Suspendisse blandit tincidunt sem, quis placerat sapien vulputate non. </div>
  <div class="message">First message</div>
</div>
<button id="add-message">Add message</button>

Related stacks :

• Keep overflow div scrolled to bottom unless user scrolls up
• Scroll Automatically to the Bottom of the Page

Answer 2

Using Javascript, I created a demo here in which, the page is full of some dummy messages, and when clicking on the button to send a new message the page will scroll down to the bottom at the new message position.

function sendMessage() {
  let msg = 'New Message </br>';
  let el = document.querySelector(".textFields");
  el.innerHTML = el.innerHTML + msg;
  window.scrollTo(0, document.body.scrollHeight);
 }
 
 function loadDummyMessages() {
  let el = document.querySelector(".textFields");
  for(let i=0; i < 50; i++) {
   el.innerHTML = el.innerHTML + 'Msg ' + (i + 1) + '</br>'
  }
 }
 
 loadDummyMessages();

.chatBox{
    height: 80%;
    padding: 25px;
    overflow-y: auto;
}

.textFields{
    --rad: 20px;
    --rad-sm: 3px;
    font: 16px/1.5 sans-serif;
    max-width: 100%;
    min-height: 90%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

button {
 position: fixed;
 top: 2px;
 background: green;
 color: white;
}

<div class="chatBox">
     <button onclick="sendMessage()">Send message</button>
     <div class="textFields">
     </div>
 </div>