deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-18 13:35:10 +02:00
Code Issues Projects Releases Wiki Activity

Keep scroll to bottom when resizing window.

Browse source
This commit is contained in:
Richard Lewis 2018-07-13 20:39:35 +03:00 committed by Pavel Djundik
parent a15b10ca45
commit c9f5e06ee4
1 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
client/components/MessageList.vue
View file

@ -60,6 +60,7 @@
<script>
require("intersection-observer");
const debounce = require("lodash/debounce");
const constants = require("../js/constants");
const clipboard = require("../js/clipboard");
@ -134,12 +135,19 @@ export default {
});
},
mounted() {
this.scrolledToBottom = true;
window.addEventListener("resize", debounce(this.handleResize, 50));
this.$refs.chat.addEventListener("scroll", debounce(this.handleScroll, 50));
this.$nextTick(() => {
if (this.historyObserver) {
this.historyObserver.observe(this.$refs.loadMoreButton);
}
});
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
this.$refs.chat.removeEventListener("scroll", this.handleScroll);
},
destroyed() {
if (this.historyObserver) {
this.historyObserver.disconnect();
@ -231,6 +239,29 @@ export default {
el.scrollTop = el.scrollHeight;
});
},
handleScroll() {
const el = this.$refs.chat;
if (!el) {
return;
}
this.scrolledToBottom = !(el.scrollHeight - el.scrollTop - el.offsetHeight > 30);
},
handleResize() {
// Keep message list scrolled to bottom on resize
const el = this.$refs.chat;
if (!el) {
return;
}
if (this.scrolledToBottom) {
this.$nextTick(() => {
el.scrollTop = el.scrollHeight;
});
}
},
},
};
</script>