diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2020-07-21 22:19:54 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2020-08-28 14:46:48 +0300 |
commit | 404106855b08888e3f1a223ace25d238a4d840c8 (patch) | |
tree | 8d0ca6d12e39083041f4f50e8fd937f38a5220f5 /src | |
parent | b1799bf8f8677fe905a3d0b456a177ce5fd099b1 (diff) |
Add scroll to bottom button
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MessagesList/MessagesList.vue | 46 |
1 files changed, 40 insertions, 6 deletions
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index 7405d0d59..02784230a 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -51,6 +51,13 @@ get the messagesList array and loop through the list to generate the messages. type="messages" :count="15" /> </template> + <transition name="fade"> + <button v-show="!isScrolledToBottom" + class="scroll-to-bottom" + @click="scrollToBottom"> + <ChevronDown :size="24" fill-color="#fff" /> + </button> + </transition> </div> </template> @@ -65,12 +72,14 @@ import isInLobby from '../../mixins/isInLobby' import debounce from 'debounce' import { EventBus } from '../../services/EventBus' import LoadingPlaceholder from '../LoadingPlaceholder' +import ChevronDown from 'vue-material-design-icons/ChevronDown' export default { name: 'MessagesList', components: { LoadingPlaceholder, MessagesGroup, + ChevronDown, }, mixins: [ @@ -200,6 +209,10 @@ export default { chatIdentifier() { return this.token + ':' + this.isParticipant + ':' + this.isInLobby }, + + scroller() { + return document.querySelector('.scroller') + }, }, watch: { @@ -503,17 +516,16 @@ export default { debounceHandleScroll: debounce(function() { this.handleScroll() - }, 600), + }, 200), /** * When the div is scrolled, this method checks if it's been scrolled to the top * or to the bottom of the list bottom. */ async handleScroll() { - const scroller = document.querySelector('.scroller') - const scrollHeight = scroller.scrollHeight - const scrollTop = scroller.scrollTop + const scrollHeight = this.scroller.scrollHeight + const scrollTop = this.scroller.scrollTop const scrollOffset = scrollHeight - scrollTop - const elementHeight = scroller.clientHeight + const elementHeight = this.scroller.clientHeight const tolerance = 10 if (scrollOffset < elementHeight + tolerance && scrollOffset > elementHeight - tolerance) { this.isScrolledToBottom = true @@ -549,8 +561,9 @@ export default { */ scrollToBottom() { this.$nextTick(function() { - document.querySelector('.scroller').scrollTop = document.querySelector('.scroller').scrollHeight + this.scroller.scrollTop = this.scroller.scrollHeight }) + this.isScrolledToBottom = true }, /** @@ -581,9 +594,12 @@ export default { </script> <style lang="scss" scoped> +@import '../../assets/variables.scss'; + .scroller { flex: 1 0; overflow-y: auto; + scroll-behavior: smooth; &__loading { height: 50px; display: flex; @@ -591,4 +607,22 @@ export default { } } +.scroll-to-bottom { + position: absolute; + width: 44px; + height: 44px; + background-color: var(--color-primary-element); + bottom: 76px; + right: 24px; + z-index: 2; + padding: 0; + margin: 0; + &:hover, + &:focus { + background-color: var(--color-primary-element-light); + opacity: 1 !important; + border: none; + } +} + </style> |