Chat Interface Auto-Scroll Not Working – Need Help!

[Donottouch]

Hello everyone,
I am creating a website on webflow
I created a chat interface where each message appears with a 2-second delay, and I set the container to overflow: auto so users can scroll. Now, I want to make the chat auto-scroll to the latest message whenever a new one appears. Please use the tablet version to understand, the interface is in the 2nd section of the page

I added the following JavaScript code:

html

CopierModifier

<script>
document.addEventListener("DOMContentLoaded", function() {
var chatContainer = document.getElementById("chat-messages");

if (!chatContainer) {
console.error("The element #chat-messages does not exist!");
return;
}

function scrollToBottom() {
requestAnimationFrame(() => {
chatContainer.scrollTop = chatContainer.scrollHeight;
});
}

// Observe the addition of new messages with the class "message"
var observer = new MutationObserver(function(mutations) {
let newMessageAdded = false;
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && node.classList.contains("message")) {
newMessageAdded = true;
}
});
});

if (newMessageAdded) {
setTimeout(scrollToBottom, 100); // Small delay to allow rendering
}
});

observer.observe(chatContainer, { childList: true, subtree: true });

// Initial scroll to the bottom when the page loads
setTimeout(scrollToBottom, 300);
});
</script>
However, this code is not working. The chat does not scroll when new messages appear.

Here is my Read-Only link:
[My Webflow Project]
https://preview.webflow.com/preview/mab ... ow=preview

Can someone please help me troubleshoot this? Thanks

[goerge1]

A common issue is that the script runs before the new message has actually been added to the DOM. Try triggering the scroll after the message is inserted, or use a MutationObserver to watch for new chat messages. Also make sure you're targeting the scrollable chat container itself, not the page.
For example, setting the container’s scrollTop to its scrollHeight after each new message should move it to the latest message. A small delay with requestAnimationFrame() can also help when Webflow is rendering the content dynamically. For gaming-related tools, you can also check this Blox Fruits calculator tool for quick trade value checks.

[goerge1]

If the messages are being added dynamically, the main issue is often that the scroll code runs before the new message has actually been rendered. Instead of relying only on a fixed delay, try scrolling the chat container after each message is inserted, for example by setting its `scrollTop` to its `scrollHeight`. A `MutationObserver` can also be useful because it detects new messages automatically and triggers the scroll at the right time. Also make sure the element you're scrolling is the actual container with `overflow: auto`, rather than the page or an outer wrapper. Checking the container's height and `scrollHeight` in the browser console can quickly confirm whether it's actually becoming scrollable. For a quick break while troubleshooting, I sometimes use a Block Blast puzzle solver for a bit of strategic fun.