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

Skip scroll event which is called after setting scrollTop

Browse Source
This commit is contained in:
Pavel Djundik 2018-09-21 18:36:21 +03:00
parent 4a0f319e91
commit 893d59e7c4
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/components/MessageList.vue
View File

@ -51,8 +51,6 @@
<script> <script>
require("intersection-observer"); require("intersection-observer");
const throttle = require("lodash/throttle");
const constants = require("../js/constants"); const constants = require("../js/constants");
const clipboard = require("../js/clipboard"); const clipboard = require("../js/clipboard");
import socket from "../js/socket"; import socket from "../js/socket";
@ -159,14 +157,11 @@ export default {
}); });
} }
this.channel.scrolledToBottom = true;
this.jumpToBottom(); this.jumpToBottom();
}); });
}, },
mounted() { mounted() {
this.debouncedScroll = throttle(this.handleScroll, 100); this.$refs.chat.addEventListener("scroll", this.handleScroll, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
this.$root.$on("resize", this.handleResize); this.$root.$on("resize", this.handleResize);
@ -181,7 +176,7 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
this.$root.$off("resize", this.handleResize); this.$root.$off("resize", this.handleResize);
this.$refs.chat.removeEventListener("scroll", this.debouncedScroll); this.$refs.chat.removeEventListener("scroll", this.handleScroll);
}, },
destroyed() { destroyed() {
if (this.historyObserver) { if (this.historyObserver) {
@ -262,6 +257,7 @@ export default {
this.isWaitingForNextTick = true; this.isWaitingForNextTick = true;
this.$nextTick(() => { this.$nextTick(() => {
this.isWaitingForNextTick = false; this.isWaitingForNextTick = false;
this.skipNextScrollEvent = true;
el.scrollTop = el.scrollHeight - heightOld; el.scrollTop = el.scrollHeight - heightOld;
}); });
} }
@ -276,6 +272,13 @@ export default {
}); });
}, },
handleScroll() { handleScroll() {
// Setting scrollTop also triggers scroll event
// We don't want to perform calculations for that
if (this.skipNextScrollEvent) {
this.skipNextScrollEvent = false;
return;
}
const el = this.$refs.chat; const el = this.$refs.chat;
if (!el) { if (!el) {
@ -291,6 +294,9 @@ export default {
} }
}, },
jumpToBottom() { jumpToBottom() {
this.skipNextScrollEvent = true;
this.channel.scrolledToBottom = true;
const el = this.$refs.chat; const el = this.$refs.chat;
el.scrollTop = el.scrollHeight; el.scrollTop = el.scrollHeight;
}, },