[SOLVED] Autoscroll chat without javascript (html and css only)

Autoscroll chat without javascript (html and css only)

I searched very long time how to autoscroll chat without JavaScript. But couldn't find any solution except this example, but there the scroll with mouse does not work as expected. Anyway all the others uses JavaScript more or less. But after some time I saw at an employee one a strange (because I don't clearly understand why it works) but simple solution and I want to share it with SO community. May be someone also search how to auto scroll only with CSS properties and HTML.

Solution

The "magic" part is in the .messages-wrapper. All we need in generally is just wrap our .messages to another div and set to it flex-direction: column-reverse. Also we can control from where messages will start from top or from bottom just adding/removing height: 100% property to .messages-wrapper. The part which I don't understand is why the column-reverse works? I always saw that column-reverse reverse only first level children order but in this case it do some "magic". I will very glad if someone explains me how and why it works

//JUST TO ADD MESSAGES DYNAMICALLY

const topMessages = document.querySelector('.start-from-top .messages');
const bottomMessages = document.querySelector('.start-from-bottom .messages');

let topMessagesNumber = 0;
let bottomMessagesNumber = 0;

const addMessage = (messages, number) => {
  const message = document.createElement('div');
  message.innerHTML = 'Some text ' + number;
  message.className = 'message';

  const isRightMessage = Math.random() >= 0.5;

  message.classList.add(`${isRightMessage ? 'right' : 'left'}`);
  
  messages.append(message);
}

const addTopMessage = () => {
  addMessage(topMessages, ++topMessagesNumber);
}

const addBottomMessage = () => {
  addMessage(bottomMessages, ++bottomMessagesNumber);
}

div:not(.messages):not(.messages-wrapper) {
  outline: 1px solid black;
}

.chat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
}

.messages-wrapper {
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.messages-wrapper.start-from-bottom {
  height: 100%;
}

.message {
  margin: 16px 8px;
}

.message.right {
  text-align: right;
}

.message.left {
  text-align: left;
}

.add-message {
  padding: 8px;
}

Starting first message from top
<div class="chat">
  <div class="messages-wrapper start-from-top">
    <div class="messages"></div>
  </div>
  <div class="add-message">
    <button onclick="addTopMessage()">Add message</button>
  </div>
</div>

<br>
<br>

Starting first message from bottom
<div class="chat">
  <div class="messages-wrapper start-from-bottom">
    <div class="messages"></div>
  </div>
  <div class="add-message">
    <button onclick="addBottomMessage()">Add message</button>
  </div>
</div>