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.

.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;
}

#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;
}

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

  </div>
</div>

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

Did you try using `position: absolute; bottom: 10px // height of your text input` on the chat container? When you add new messages, just add them to the bottom, and the container will show the last one automatically, cause that's the one anchored to the text input. — sayandcode, Dec 02 '22 at 14:50

Neha Soni · Answer 1 · 2022-12-01T11:29:22.237

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>'; // A new message
  let el = document.querySelector(".textFields"); // Selector to put new msg
  el.innerHTML = el.innerHTML + msg; // Append new msg to that container.
  window.scrollTo(0, document.body.scrollHeight); // Scroll page to the bottom.
 }
 
 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>

Cédric · Answer 2 · 2022-12-02T10:26:19.177

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 (with JavaScript).

I suggest you to keep the column-reverse so it's automatically scrolled down when the page is loaded.

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 :

Is it possible to do it only in css? Because I am required to do it only in css. When I was searching for some solutions I saw that there is a JS way to do it, just not sure I can use it :D — Ivars, Dec 01 '22 at 11:29
Unfortunately I don't think you can because it depends on an event — Cédric, Dec 01 '22 at 11:31
I mean that css is supposed to load first, then html and then js, if you set the first bottom scroll in js, you'll see it jump from top to bottom. If you set it with css the first time, it will be on bottom by "default", you won't need to wait js to load — Cédric, Dec 01 '22 at 12:34

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

2 Answers2