where ResizeObserver is support, restore anchored node on resize

element-hq · Sep 15, 2021 · 2c415e3 · 2c415e3
1 parent 04edff2
commit 2c415e3
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/platform/web/ui/session/room/TimelineView.ts b/src/platform/web/ui/session/room/TimelineView.ts
@@ -69,6 +69,7 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
     private anchoredBottom: number = 0;
     private stickToBottom: boolean = true;
     private tilesView?: TilesListView;
+    private resizeObserver?: ResizeObserver;
 
     render(t: TemplateBuilder, vm: TimelineViewModel) {
         // assume this view will be mounted in the parent DOM straight away
@@ -77,9 +78,26 @@ export class TimelineView extends TemplateView<TimelineViewModel> {
             this.restoreScrollPosition();
         });
         this.tilesView = new TilesListView(vm.tiles, () => this.restoreScrollPosition());
-        return t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
+        const root = t.div({className: "Timeline bottom-aligned-scroll", onScroll: () => this.onScroll()}, [
             t.view(this.tilesView)
         ]);
+
+        if (typeof ResizeObserver === "function") {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.restoreScrollPosition();
+            });
+            this.resizeObserver.observe(root);
+        }
+
+        return root;
+    }
+
+    public unmount() {
+        super.unmount();
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.root());
+            this.resizeObserver = null;
+        }
     }
 
     private restoreScrollPosition() {