✨ 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,7 +3,8 @@
         Discussions
     </header>
     <div class="content" v-show="open">
-        <div class="messages">
+        <div class="messages" @scroll="onMessagesScroll">
+            <div class="inner-messages">
                 <div class="message" v-for="message of messages" :key="message.date">
                     <div class="date">
                         {{ message.time }}
@@ -16,6 +17,7 @@
                     </div>
                 </div>
             </div>
+        </div>
         <div class="infos" v-if="user">
             Your nickname is <input class="user-name" :style="`color: ${user.color};`" v-model="userName" @change="onUserNameChange($event)" @keydown="onUserNameKeyDown($event)"/>
         </div>