Added scroll only when has reached bottom.

src/snek/templates/web.html

@@ -45,11 +45,18 @@
             time.innerText = app.timeDescription(time.dataset.created_at);
         });
     }
-
-    function updateLayout() {
+    function isElementVisible(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+    function updateLayout(doScrollDown) {
         const messagesContainer = document.querySelector(".chat-messages");
         //messagesContainer.scrollTop = messagesContainer.scrollHeight + 1000;
-        
         updateTimes();
         let previousUser = null;
         document.querySelectorAll(".message").forEach((message) => {
@@ -60,8 +67,10 @@
                 message.classList.remove("switch-user");
             }
         });
-        const lastMessage = messagesContainer.querySelector(".message:last-child");
+        lastMessage = messagesContainer.querySelector(".message:last-child");
+        if(doScrollDown){ 
             lastMessage.scrollIntoView({ inline: "nearest" });
+        }
 
     }
 
@@ -74,6 +83,11 @@
             app.playSound(0);
         }
         
+        const messagesContainer = document.querySelector(".chat-messages");
+        const lastMessage = messagesContainer.querySelector(".message:last-child"); 
+        const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
+
+
         const message = document.createElement("div");
         message.dataset.color = data.color;
         message.dataset.created_at = data.created_at;
@@ -81,14 +95,14 @@
         message.dataset.uid = data.uid;
         message.innerHTML = data.html;
         document.querySelector(".chat-messages").appendChild(message.firstChild);
-        updateLayout();
+        updateLayout(doScrollDownBecauseLastMessageIsVisible);
         setTimeout(()=>{
-            updateLayout()
+            updateLayout(doScrollDownBecauseLastMessageIsVisible)
         },1000)
     });
 
     initInputField(document.querySelector("textarea"));
-    updateLayout();
+    updateLayout(true);
 </script>
 {% endblock %}