如何使滚动条下降时，新的消息接收CSS

Question

我就是想不出解决这个问题的办法。我有CSS文件和HTML，我必须创建ChatBot，其中所有的样式都位于CSS中。

我试图使滚动条下降时，所有的屏幕都充满了消息，并显示最新的一个。消息从顶部开始，然后向下填充直到底部。

这是我的html主体代码，又名聊天屏幕主体。在textFields中是使用Jquery从用户输入放置的消息。和bot输出

.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;
}
#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;
}

<div class="chatBox">
<div class="textFields">
</div>
</div>

我已经尝试在.chatBox上添加display: flex, flex-direction: column-reverse，但它不起作用。在.textFields，我试图添加column-reverse，这是工作的，但只有上下，因为它只是颠倒的元素。我想我可以将元素添加到<div>，这样它就可以从顶部开始工作。但是仍然添加column-reverse和prepend与现在的代码相同。

Answer 1

使用Javascript，我在这里创建了一个演示，其中页面充满了一些虚拟消息，当单击按钮发送新消息时，页面将向下滚动到新消息位置的底部。

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

Answer 2

我认为display: flex;flex-direction: column-reverse;只会在页面加载时工作，当添加新消息时(使用JavaScript)，您需要添加自动滚动。

我建议你保留column-reverse，这样当页面加载时它会自动向下滚动。

let messages = document.getElementById("messages")
scrollToBottom = () => {
messages.scrollTo(0, messages.scrollHeight);
}
let message = '<div class="message">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 class="message">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 class="message">First message</div>
</div>
<button id="add-message">Add message</button>

相关栈:

• 保持溢出div滚动到底部，除非用户向上滚动
• 自动滚动到页面底部