supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Some scroll fixes

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 22:53:30 +03:00 committed by Pavel Djundik
parent f4b4cfdee2
commit 4b5252d285
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/MessageList.vue
View File

@ -116,6 +116,7 @@ export default {
}, },
watch: { watch: {
"channel.messages"() { "channel.messages"() {
this.scrolledToBottom = true;
this.keepScrollPosition(); this.keepScrollPosition();
}, },
}, },
@ -131,13 +132,17 @@ export default {
}); });
} }
this.scrolledToBottom = true;
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight; this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
}); });
}, },
mounted() { mounted() {
this.scrolledToBottom = true; this.debouncedResize = debounce(this.handleResize, 50);
window.addEventListener("resize", debounce(this.handleResize, 50), {passive: true}); this.debouncedScroll = debounce(this.handleScroll, 50)
this.$refs.chat.addEventListener("scroll", debounce(this.handleScroll, 50), {passive: true});
window.addEventListener("resize", this.debouncedResize, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
this.$nextTick(() => { this.$nextTick(() => {
if (this.historyObserver) { if (this.historyObserver) {
this.historyObserver.observe(this.$refs.loadMoreButton); this.historyObserver.observe(this.$refs.loadMoreButton);
@ -145,8 +150,8 @@ export default {
}); });
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.handleResize); window.removeEventListener("resize", this.debouncedResize);
this.$refs.chat.removeEventListener("scroll", this.handleScroll); this.$refs.chat.removeEventListener("scroll", this.debouncedScroll);
}, },
destroyed() { destroyed() {
if (this.historyObserver) { if (this.historyObserver) {
@ -219,7 +224,7 @@ export default {
return; return;
} }
if (el.scrollHeight - el.scrollTop - el.offsetHeight > 30) { if (!this.scrolledToBottom) {
if (this.channel.historyLoading) { if (this.channel.historyLoading) {
const heightOld = el.scrollHeight - el.scrollTop; const heightOld = el.scrollHeight - el.scrollTop;
@ -246,17 +251,13 @@ export default {
return; return;
} }
this.scrolledToBottom = !(el.scrollHeight - el.scrollTop - el.offsetHeight > 30); this.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
}, },
handleResize() { handleResize() {
// Keep message list scrolled to bottom on resize // Keep message list scrolled to bottom on resize
const el = this.$refs.chat; const el = this.$refs.chat;
if (!el) { if (el && this.scrolledToBottom) {
return;
}
if (this.scrolledToBottom) {
this.$nextTick(() => { this.$nextTick(() => {
el.scrollTop = el.scrollHeight; el.scrollTop = el.scrollHeight;
}); });