[vue.auth.channel] added auto-scroll to bottom message stack when stack have 1+ more element

webpack/vue/auth/channel.vue

@@ -8,7 +8,7 @@
 
 		<div class='body'>
 
-			<section class='message-stack'>
+			<section class='message-stack' ref='stack'>
 
 				<div class='message' v-for='m in gs.content.messages'>
 					<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${m.uid}");`'></div>
@@ -39,7 +39,8 @@ export default {
 		message: '', // message text
 		pressed: {
 			16: false // SHIFT key
-		}
+		},
+		stack_length: 0
 
 	}; },
 
@@ -99,6 +100,27 @@ export default {
 
 		}
 
+	},
+
+	updated(){
+
+		let stack_length = this.$refs.stack.children.length;
+
+
+		/* (1) If new messages -> scroll to bottom */
+		if( stack_length > this.stack_length ){
+
+			this.$refs.stack.scrollTop = 10000;
+
+			// manage overriding css animation
+			setTimeout( () => { this.$refs.stack.scrollTop = 10000 }, 300 );
+
+		}
+
+		/* (2) If new messages -> update stack length */
+		if( stack_length != this.stack_length )
+			this.stack_length = stack_length;
+
 	}
 
 }