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

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 >
        <div >
            
        </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.

CodePudding user response：

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.

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 >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 >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 >First message</div>
</div>
<button id="add-message">Add message</button>

Related stacks :

CodePudding user response：

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 >
     <button onclick="sendMessage()">Send message</button>
     <div >
     </div>
 </div>