没有 javascript 的自动滚动聊天（仅限 html 和 css）

Question

我搜索了很长时间如何在没有 JavaScript 的情况下自动滚动聊天。但是除了这个例子找不到任何解决方案，但是鼠标滚动没有按预期工作。无论如何，所有其他人或多或少都使用 JavaScript。但一段时间后，我在一名员工那里看到了一个奇怪的（因为我不清楚它为什么起作用）但简单的解决方案，我想与 SO 社区分享。可能有人也在搜索如何仅使用 CSS 属性和 HTML.

自动滚动

Answer 1

“魔法”部分在 .messages-wrapper 中。通常我们需要的只是将我们的 .messages 包装到另一个 div 并设置为 flex-direction: column-reverse。我们也可以控制消息从哪里开始是从顶部开始还是从底部开始只是 adding/removing height: 100% 属性到 .messages-wrapper。我不明白的部分是为什么 column-reverse 有效？我总是看到 column-reverse 仅反转第一级 children 顺序，但在这种情况下它做了一些“魔术”。如果有人向我解释它的工作原理和原因，我将非常高兴

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

Answer 2

为了实现该功能，您需要将 scrollTop 等于 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>

并且将 height: 400px 改为 max-height: 400px; 然后设置 overflow-y: auto.

注意为了更好地查看，请在全屏或 CODEPEN 中检查它。

没有 javascript 的自动滚动聊天（仅限 html 和 css）

Autoscroll chat without javascript (html and css only)

html

javascript

css

autoscroll

flexbox