refs #2674 Fix scroll position using ResizeObserver

src/renderer/components/TimelineSpace/Contents/DirectMessages.vue

@@ -40,7 +40,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -89,21 +90,21 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.direct) {
@@ -111,6 +112,7 @@ export default {
       this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
     }
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue

@@ -41,7 +41,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -84,18 +85,18 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   watch: {
     tag: function (newTag, _oldTag) {
@@ -124,6 +125,7 @@ export default {
     this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
     this.reset()
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   methods: {
     async load(tag) {

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -41,7 +41,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -100,24 +101,25 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Lists/Show.vue

@@ -41,7 +41,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -85,18 +86,18 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   watch: {
     list_id: function () {
@@ -122,6 +123,7 @@ export default {
   },
   beforeDestroy() {
     this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Local.vue

@@ -40,7 +40,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -89,21 +90,21 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.local) {
@@ -111,6 +112,7 @@ export default {
       this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
     }
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Mentions.vue

@@ -39,7 +39,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -84,24 +85,25 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -39,7 +39,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -86,24 +87,25 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -40,7 +40,8 @@ export default {
   data() {
     return {
       focusedId: null,
-      scroll: null
+      scroll: null,
+      observer: null
     }
   },
   computed: {
@@ -90,21 +91,21 @@ export default {
     const el = document.getElementById('scroller')
     this.scroll = new ScrollPosition(el)
     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() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
     }
-    if (!this.heading && !this.lazyLoading) {
+    this.scroll.prepare()
-      const el = document.getElementById('scroller')
-      this.scroll = new ScrollPosition(el)
-      this.scroll.prepare()
-    }
-  },
-  updated() {
-    if (this.scroll && !this.heading && !this.lazyLoading) {
-      this.scroll.restore()
-    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.public) {
@@ -112,6 +113,7 @@ export default {
       this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
     }
     Event.$off('focus-timeline')
+    this.observer.disconnect()
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)