Busqué durante mucho tiempo cómo desplazar automáticamente el chat sin JavaScript. Pero no pude encontrar ninguna solución excepto este ejemplo, pero allí el desplazamiento con el mouse no funciona como se esperaba. De todos modos, todos los demás usan JavaScript más o menos. Pero después de un tiempo vi en un empleado una solución extraña (porque no entiendo claramente por qué funciona) pero simple y quiero compartirla con la comunidad SO. Puede ser que alguien también busque cómo desplazarse automáticamente solo con propiedades CSS y HTML .
La parte "mágica" está en .messages-wrapper . En general, todo lo que necesitamos es envolver nuestros .messages en otro div y establecerlo en flex-direction: column-reverse . También podemos controlar desde dónde comenzarán los mensajes desde arriba o desde abajo simplemente agregando/eliminando height: 100% property to .messages-wrapper . La parte que no entiendo es por qué funciona la column-reverse . Siempre vi que la column-reverse invierte solo el orden de los niños de primer nivel, pero en este caso hace algo de "magia". Estaré muy contento si alguien me explica cómo y por qué funciona.
//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>Para lograr esa funcionalidad, debe poner scrollTop igual a scrollHeight
$(function () { $('form').on('submit', function (event) { event.preventDefault(); var message = $('.message').first().clone(); message.find('p').text($('input').val()); message.prependTo('.chat-container'); $('input').val(''); /* FOR AUTO SCROLL TO BOTTOM */ $('.chat-container').scrollTop = $('.chat-container').scrollHeight; }); }); * { box-sizing: border-box; } .container { width: 400px; margin: 0 auto; border: solid 1px #ccc; border-radius: 5px; overflow: hidden; } .chat-container { max-height: 400px; overflow: auto; transform: rotate(180deg); direction: rtl; } .chat-container .message { border-bottom: solid 1px #ccc; padding: 20px; transform: rotate(180deg); direction: ltr; } .chat-container .message .avatar { float: left; margin-right: 5px; } .chat-container .message .datetime { float: right; color: #999; } .send-message-form input { width: 100%; border: none; font-size: 16px; padding: 10px; } .send-message-form button { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="chat-container"> <div class="message"> <img class="avatar" src="https://placeimg.com/50/50/people?1"> <div class="datetime">23/03/2016 20:40</div> <p>A message text</p> </div> <div class="message"> <img class="avatar" src="https://placeimg.com/50/50/people?2"> <div class="datetime">23/03/2016 20:40</div> <p>A message text</p> </div> <div class="message"> <img class="avatar" src="https://placeimg.com/50/50/people?1"> <div class="datetime">23/03/2016 20:40</div> <p>A message text</p> </div> </div> <form class="send-message-form"> <input type="text" placeholder="Ciao"> <button type="submit">Send</button> </form> </div> Y también en lugar de height: 400px , cámbielo a max-height: 400px; y luego configure overflow-y: auto .
NOTA PARA UNA MEJOR VISUALIZACIÓN REVISARLO EN pantalla completa o CODEPEN.