I am working on webflow, I've 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've added a JavaScript code:

However, this code is not working. The chat does not scroll when new messages appear.

Here is my Read-Only link: :point_right: [My Webflow Project] ;utm_source=designer&utm_content=mabelles-ultra-awesome-site&preview=a3416b477281c47b3ec6738f543b0ebe&pageId=6702d4ad3e204f6ee8635e93&locale=en&workflow=preview

Can someone please help me troubleshoot this? Thanks

i've tried this code

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

        if (!chatContainer) {
            console.error("L'élément #chat-messages n'existe pas !");
            return;
        }

        // Fonction pour faire défiler la boîte de messages vers le bas
        function scrollToBottom() {
            chatContainer.scrollTo({
                top: chatContainer.scrollHeight,  // Positionner le scroll à la fin du contenu
                behavior: "smooth"               // Pour un défilement fluide
            });
        }

        // Observer l'ajout de nouveaux messages
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    // Vérifier que c'est un message avec un ID commençant par "message-"
                    if (node.nodeType === 1 && node.id.startsWith("message-")) {
                        console.log("Nouveau message ajouté", node);

                        // Attendre que l'animation Webflow soit terminée avant de défiler
                        setTimeout(function() {
                            console.log("Défilement vers le bas après l'animation");
                            scrollToBottom();  // Défile vers le bas après l'animation
                        }, 2000);  // 2 secondes pour attendre l'animation
                    }
                });
            });
        });

        // Observer les changements dans le conteneur des messages
        observer.observe(chatContainer, { childList: true, subtree: true });

        // Suppression du premier défilement automatique au chargement initial
        // setTimeout(scrollToBottom, 500); // Supprimer cette ligne
    });
</script>

However, this code is not working. The chat does not scroll when new messages appear. can you please propose a code that works?

I am working on webflow, I've 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've added a JavaScript code:

However, this code is not working. The chat does not scroll when new messages appear.

Here is my Read-Only link: :point_right: [My Webflow Project] https://preview.webflow.com/preview/mabelles-ultra-awesome-site?utm_medium=preview_link&utm_source=designer&utm_content=mabelles-ultra-awesome-site&preview=a3416b477281c47b3ec6738f543b0ebe&pageId=6702d4ad3e204f6ee8635e93&locale=en&workflow=preview

Can someone please help me troubleshoot this? Thanks

i've tried this code

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

        if (!chatContainer) {
            console.error("L'élément #chat-messages n'existe pas !");
            return;
        }

        // Fonction pour faire défiler la boîte de messages vers le bas
        function scrollToBottom() {
            chatContainer.scrollTo({
                top: chatContainer.scrollHeight,  // Positionner le scroll à la fin du contenu
                behavior: "smooth"               // Pour un défilement fluide
            });
        }

        // Observer l'ajout de nouveaux messages
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    // Vérifier que c'est un message avec un ID commençant par "message-"
                    if (node.nodeType === 1 && node.id.startsWith("message-")) {
                        console.log("Nouveau message ajouté", node);

                        // Attendre que l'animation Webflow soit terminée avant de défiler
                        setTimeout(function() {
                            console.log("Défilement vers le bas après l'animation");
                            scrollToBottom();  // Défile vers le bas après l'animation
                        }, 2000);  // 2 secondes pour attendre l'animation
                    }
                });
            });
        });

        // Observer les changements dans le conteneur des messages
        observer.observe(chatContainer, { childList: true, subtree: true });

        // Suppression du premier défilement automatique au chargement initial
        // setTimeout(scrollToBottom, 500); // Supprimer cette ligne
    });
</script>

However, this code is not working. The chat does not scroll when new messages appear. can you please propose a code that works?

• javascript
• autoscroll
• webflow

1 Answer 1

There are a few things that could be improved:

1. Ensure chatContainer exists and is properly loaded before running the script.
2. Improve MutationObserver conditions—rather than checking node.id.startsWith("message-"), consider checking for a class or tag for better reliability.
3. Be aware that smooth scrolling might be overridden by Webflow or other scripts, potentially affecting scrollTo() behavior.