✨ Site > Chat > Add auto scroll

site/src/components/chat/script.js

@@ -29,11 +29,29 @@ export default
         user(value)
         {
             this.userName = value.name
+        },
+
+        messages()
+        {
+            window.requestAnimationFrame(() =>
+            {
+                if(this.atBottom)
+                {
+                    this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight
+                }
+            })
         }
     },
 
+    created()
+    {
+        this.atBottom = true
+    },
+
     mounted()
     {
+        this.$messages = this.$el.querySelector('.messages')
+        this.$innerMessages = this.$messages.querySelector('.inner-messages')
     },
 
     methods:
@@ -68,6 +86,11 @@ export default
                 this.$store.commit('setPendingMessage', { text: this.messageText })
                 this.messageText = ''
             }
+        },
+
+        onMessagesScroll()
+        {
+            this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15
         }
     }
 }

site/src/components/chat/template.html

@@ -3,16 +3,18 @@
         Discussions
     </header>
     <div class="content" v-show="open">
-        <div class="messages">
+        <div class="messages" @scroll="onMessagesScroll">
-            <div class="message" v-for="message of messages" :key="message.date">
+            <div class="inner-messages">
-                <div class="date">
+                <div class="message" v-for="message of messages" :key="message.date">
-                    {{ message.time }}
+                    <div class="date">
-                </div>
+                        {{ message.time }}
-                <div class="user" :style="`color: ${message.user.color};`">
+                    </div>
-                    {{ message.user.name }}
+                    <div class="user" :style="`color: ${message.user.color};`">
-                </div>
+                        {{ message.user.name }}
-                <div class="text">
+                    </div>
-                    {{ message.text }}
+                    <div class="text">
+                        {{ message.text }}
+                    </div>
                 </div>
             </div>
         </div>