沒有 javascript 的自動滾動聊天（僅限 html 和 css）

Question

我搜索了很長時間如何在沒有 JavaScript 的情況下自動滾動聊天。但是除了這個例子之外找不到任何解決方案，但是鼠標滾動不能按預期工作。 無論如何，所有其他人或多或少都使用JavaScript 。 但一段時間后，我在一名員工那里看到了一個奇怪的（因為我不清楚它為什么起作用）但簡單的解決方案，我想與 SO 社區分享。 可能有人也在搜索如何僅使用CSS屬性和HTML自動滾動。

Answer 1

“魔法”部分在.messages-wrapper中。 通常我們需要的只是將我們的.messages包裝到另一個div並將其設置為flex-direction: column-reverse 。 我們也可以控制消息從頂部或底部開始的位置，只需添加/刪除height: 100%屬性到.messages-wrapper 。 我不明白的部分是為什么column-reverse有效？ 我總是看到column-reverse只反轉第一級孩子的順序，但在這種情況下它做了一些“魔術”。 如果有人向我解釋它的工作原理和原因，我會很高興

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