refs #2674 Fix scroll position using ResizeObserver
This commit is contained in:
parent
d2cf04c4bb
commit
800ca9aff2
|
@ -40,7 +40,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -89,21 +90,21 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.unreadNotification.direct) {
|
if (!this.unreadNotification.direct) {
|
||||||
|
@ -111,6 +112,7 @@ export default {
|
||||||
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
|
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
|
||||||
}
|
}
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||||
|
|
|
@ -41,7 +41,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -84,18 +85,18 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
},
|
|
||||||
beforeUpdate() {
|
this.observer = new ResizeObserver(() => {
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
this.scroll.restore()
|
this.scroll.restore()
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
|
},
|
||||||
|
beforeUpdate() {
|
||||||
|
this.scroll.prepare()
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
tag: function (newTag, _oldTag) {
|
tag: function (newTag, _oldTag) {
|
||||||
|
@ -124,6 +125,7 @@ export default {
|
||||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
||||||
this.reset()
|
this.reset()
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async load(tag) {
|
async load(tag) {
|
||||||
|
|
|
@ -41,7 +41,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -100,24 +101,25 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
|
||||||
|
|
|
@ -41,7 +41,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -85,18 +86,18 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
},
|
|
||||||
beforeUpdate() {
|
this.observer = new ResizeObserver(() => {
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
this.scroll.restore()
|
this.scroll.restore()
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
|
},
|
||||||
|
beforeUpdate() {
|
||||||
|
this.scroll.prepare()
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
list_id: function () {
|
list_id: function () {
|
||||||
|
@ -122,6 +123,7 @@ export default {
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||||
|
|
|
@ -40,7 +40,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -89,21 +90,21 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.unreadNotification.local) {
|
if (!this.unreadNotification.local) {
|
||||||
|
@ -111,6 +112,7 @@ export default {
|
||||||
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
|
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
|
||||||
}
|
}
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||||
|
|
|
@ -39,7 +39,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -84,24 +85,25 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
|
||||||
|
|
|
@ -39,7 +39,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -86,24 +87,25 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
|
||||||
|
|
|
@ -40,7 +40,8 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focusedId: null,
|
focusedId: null,
|
||||||
scroll: null
|
scroll: null,
|
||||||
|
observer: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -90,21 +91,21 @@ export default {
|
||||||
const el = document.getElementById('scroller')
|
const el = document.getElementById('scroller')
|
||||||
this.scroll = new ScrollPosition(el)
|
this.scroll = new ScrollPosition(el)
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
|
|
||||||
|
this.observer = new ResizeObserver(() => {
|
||||||
|
if (this.scroll && !this.heading && !this.lazyLoading) {
|
||||||
|
this.scroll.restore()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
|
||||||
|
this.observer.observe(scrollWrapper)
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
beforeUpdate() {
|
||||||
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
|
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
|
||||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
||||||
}
|
}
|
||||||
if (!this.heading && !this.lazyLoading) {
|
|
||||||
const el = document.getElementById('scroller')
|
|
||||||
this.scroll = new ScrollPosition(el)
|
|
||||||
this.scroll.prepare()
|
this.scroll.prepare()
|
||||||
}
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.scroll && !this.heading && !this.lazyLoading) {
|
|
||||||
this.scroll.restore()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (!this.unreadNotification.public) {
|
if (!this.unreadNotification.public) {
|
||||||
|
@ -112,6 +113,7 @@ export default {
|
||||||
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
|
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
|
||||||
}
|
}
|
||||||
Event.$off('focus-timeline')
|
Event.$off('focus-timeline')
|
||||||
|
this.observer.disconnect()
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||||
|
|
Loading…
Reference in New Issue