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

Throttle scroll event instead of debouncing

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-14 10:27:45 +03:00 committed by Pavel Djundik
parent 36b6fdcc88
commit a899b1b46d
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/components/MessageList.vue
View File

@ -60,7 +60,8 @@
<script> <script>
require("intersection-observer"); require("intersection-observer");
const debounce = require("lodash/debounce");
import {debounce, throttle} from "lodash";
const constants = require("../js/constants"); const constants = require("../js/constants");
const clipboard = require("../js/clipboard"); const clipboard = require("../js/clipboard");
@ -116,7 +117,7 @@ export default {
}, },
watch: { watch: {
"channel.id"() { "channel.id"() {
this.$set(this.link, "scrolledToBottom", true); this.$set(this.channel, "scrolledToBottom", true);
}, },
"channel.messages"() { "channel.messages"() {
this.keepScrollPosition(); this.keepScrollPosition();
@ -139,8 +140,8 @@ export default {
}); });
}, },
mounted() { mounted() {
this.debouncedResize = debounce(this.handleResize, 50); this.debouncedResize = debounce(this.handleResize, 500);
this.debouncedScroll = debounce(this.handleScroll, 50); this.debouncedScroll = throttle(this.handleScroll, 150);
window.addEventListener("resize", this.debouncedResize, {passive: true}); window.addEventListener("resize", this.debouncedResize, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true}); this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
@ -260,9 +261,7 @@ export default {
const el = this.$refs.chat; const el = this.$refs.chat;
if (el && this.channel.scrolledToBottom) { if (el && this.channel.scrolledToBottom) {
this.$nextTick(() => {
el.scrollTop = el.scrollHeight; el.scrollTop = el.scrollHeight;
});
} }
}, },
}, },