Как прокрутить последнее сообщение от пользователя в верхнюю часть контейнера чата ⇐ Javascript

[Anonymous]

Автоматически прокручивайте просмотр просмотра чата с фиксированной высотой, так что каждое новое пользовательское сообщение расположено вверху-поднимает более ранние сообщения вверх и вне поля зрения (видны только путем прокрутки)-как и Chatgpt. Сообщения остаются в хронологическом порядке (сверху до дна) в DOM, но когда добавляется помощник ответа и вызывает переполнение, контейнер должен прокручивать дно, чтобы показать этот последний контент. Как я могу реализовать это поведение, используя JavaScript и CSS < /p>




.chat-container { display: flex; flex-direction: column; height: 100vh; }
.chat-header { padding: 1rem; background: #444; color: white; }
.chat-messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
border: 1px solid #ccc;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.message { max-width: 70%; padding: 0.5rem; border-radius: 1rem; }
.user { background: #007aff; color: white; align-self: flex-end; }
.bot { background: #ddd; color: #333; align-self: flex-start; }
.composer { padding: 0.5rem; border-top: 1px solid #ccc; }
.input { width: 80%; padding: 0.5rem; }
.send-btn { padding: 0.5rem 1rem; }




Chat Demo

Welcome!



Send




const msgs = document.getElementById('msgs');
const inputEl = document.getElementById('input');
const sendBtn = document.getElementById('send');

function addMessage(text, cls) {
const m = document.createElement('div');
m.className = `message ${cls}`;
m.textContent = text;

// I append chronologically:
msgs.appendChild(m);

// then try to scroll the new message into view at the top:
m.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

sendBtn.addEventListener('click', () => {
const txt = inputEl.textContent.trim();
if (!txt) return;
addMessage(txt, 'user');
inputEl.textContent = '';
setTimeout(() => addMessage('Echo: ' + txt, 'bot'), 200);
});





Подробнее здесь: https://stackoverflow.com/questions/796 ... -container