From e3d65272096632c3c8585189a82f4dc2c1911496 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 17 Nov 2022 21:38:40 +0200
Subject: [PATCH] cleaner autoscroll system - may fix mobile webkit issues

---
 frontend/src/components/Messages.svelte | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index 2149b0b..a7343b8 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -8,7 +8,6 @@
 
     export let channelId;
     let scrollTarget;
-    let scrollAnchor;
     let shouldAutoscroll = true;
     let lastScrollHeight = null;
     let isScrolledToBottom = true;
@@ -27,16 +26,16 @@
                 lastScrollHeight = null;
                 return;
             }
-            if (shouldAutoscroll && scrollAnchor) {
+            if (shouldAutoscroll) {
                 messagesLog("[afterUpdate] performing autoscroll...");
-                scrollAnchor.scrollIntoView(false);
+                scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
             }
         });
     });
 
     const onScroll = (e) => {
-        const { scrollHeight, scrollTop, clientHeight } = e.target;
-        if ((scrollHeight - scrollTop - clientHeight) <= 20) { // user scrolled to bottom
+        const { offsetHeight, scrollTop, scrollHeight } = e.target;
+        if ((offsetHeight + scrollTop) > (scrollHeight - 20)) { // user scrolled to bottom
             messages.setIsCollectingOldMessages(true);
             shouldAutoscroll = true;
             isScrolledToBottom = true;
@@ -62,12 +61,11 @@
 
     const windowDidResize = () => {
         // TODO: hack
-        // showSidebar is false on small viewports
         // scrolling to bottom when the virtual keyboard pops up does not work on chromium purely based on isScrolledToBottom for some reason
         if (isScrolledToBottom || $smallViewport) {
             messagesLog("[windowDidResize] window resized, queueing microtask to scroll to bottom...");
             queueMicrotask(() => {
-                scrollAnchor.scrollIntoView(false);
+                scrollTarget.scrollTo(0, scrollTarget.scrollHeight);
                 messagesLog("[windowDidResize] scroll to bottom microtask finished.");
             });
         }
@@ -123,5 +121,4 @@
         {/if}
         <Message message={message} />
     {/each}
-    <div bind:this={ scrollAnchor } />
 </div>