stick chat scroll to bottom to help with OSK resizing the viewport

This commit is contained in:
Henry Jameson 2022-05-22 12:18:20 +03:00
parent 2c876f455a
commit d137d5800a

View file

@ -43,6 +43,7 @@ const Chat = {
}, },
created () { created () {
this.startFetching() this.startFetching()
window.addEventListener('resize', this.handleResize)
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.handleScroll) window.addEventListener('scroll', this.handleScroll)
@ -132,7 +133,7 @@ const Chat = {
} }
}) })
}, },
// Preserves the scroll position when OSK appears or the posting form changes its height. // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
handleResize (opts = {}) { handleResize (opts = {}) {
const { expand = false, delayed = false } = opts const { expand = false, delayed = false } = opts
@ -144,15 +145,14 @@ const Chat = {
} }
this.$nextTick(() => { this.$nextTick(() => {
const { scrollHeight = undefined } = this.lastScrollPosition const { offsetHeight = undefined } = getScrollPosition()
this.lastScrollPosition = getScrollPosition() const diff = this.lastScrollPosition.offsetHeight - offsetHeight
if (diff !== 0 || (!this.bottomedOut() && expand)) {
const diff = this.lastScrollPosition.scrollHeight - scrollHeight
if (diff > 0 || (!this.bottomedOut() && expand)) {
this.$nextTick(() => { this.$nextTick(() => {
window.scrollTo({ top: window.scrollY + diff }) window.scrollTo({ top: window.scrollY + diff })
}) })
} }
this.lastScrollPosition = getScrollPosition()
}) })
}, },
scrollDown (options = {}) { scrollDown (options = {}) {