[vue.auth.channel] added auto-scroll to bottom message stack when stack have 1+ more element
This commit is contained in:
parent
e0a662a410
commit
a99d82cae2
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
<div class='body'>
|
<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='message' v-for='m in gs.content.messages'>
|
||||||
<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${m.uid}");`'></div>
|
<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
|
message: '', // message text
|
||||||
pressed: {
|
pressed: {
|
||||||
16: false // SHIFT key
|
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue