Anchor scroll to bottom when switching channels.

src/lib/renderer/Singleton.ts

@@ -23,6 +23,7 @@ export class ChannelRenderer {
     stale = false;
     fetching = false;
     scrollPosition = 0;
+    scrollAnchored = false;
 
     constructor(channel: Channel) {
         this.channel = channel;
@@ -31,6 +32,7 @@ export class ChannelRenderer {
             channel: false,
             currentRenderer: false,
             scrollPosition: false,
+            scrollAnchored: false,
         });
 
         this.receive = this.receive.bind(this);

src/pages/channels/messaging/MessageArea.tsx

@@ -173,7 +173,16 @@ export const MessageArea = observer(({ channel }: Props) => {
         if (message) return;
         if (renderer.state === "RENDER") {
             runInAction(() => (renderer.fetching = true));
-            setScrollState({ type: "ScrollTop", y: renderer.scrollPosition });
+
+            console.log(renderer.scrollAnchored);
+            if (renderer.scrollAnchored) {
+                setScrollState({ type: "ScrollToBottom" });
+            } else {
+                setScrollState({
+                    type: "ScrollTop",
+                    y: renderer.scrollPosition,
+                });
+            }
         } else {
             renderer.init();
         }
@@ -254,6 +263,12 @@ export const MessageArea = observer(({ channel }: Props) => {
             if (atBottom(100)) {
                 renderer.loadBottom(current!);
             }
+
+            if (atBottom()) {
+                renderer.scrollAnchored = true;
+            } else {
+                renderer.scrollAnchored = false;
+            }
         }
 
         current.addEventListener("scroll", onScroll);