Some scroll fixes
This commit is contained in:
parent
f4b4cfdee2
commit
4b5252d285
@ -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;
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user