malice

public

Star0

Fork 0

Watch0

124 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `d1818305ffd6`

tarball

atagen <boss@atagen.co>2026-10-26 10:44 UTC

1 file changed+19-2

web: only unstick the timeline on scrolls the user made

When content shrank the browser clamped scrollTop, and that clamp's scroll event landed after newer rows had rendered, so it read as an upward user scroll with a gap and dropped stickToBottom while the room was still filling. Upward scrolls now unstick only within 400ms of wheel, touch, key or pointer input or while the scrollbar is held.

Modified file: web/src/App.svelte+19 additions−2 deletions@@ -745,10 +745,24 @@
     void tick().then(() => timelineViewport?.restore());
   }
 
+  const USER_SCROLL_MS = 400;
+  let userScrollAt = -Infinity;
+  let scrollbarHeld = false;
+
   function noteUserScroll(): void {
+    userScrollAt = performance.now();
     timelineViewport?.releaseScroll();
   }
 
+  function onTimelinePointer(e: PointerEvent): void {
+    if (e.target === e.currentTarget) scrollbarHeld = true;
+    noteUserScroll();
+  }
+
+  function releaseScrollbar(): void {
+    scrollbarHeld = false;
+  }
+
   function onTimelineKey(e: KeyboardEvent): void {
     if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(e.key)) noteUserScroll();
   }
@@ -764,7 +778,8 @@
     if (timelineViewport?.consumeScroll()) return;
     const gap = timelineEl.scrollHeight - top - timelineEl.clientHeight;
     const wasAtBottom = stickToBottom;
-    stickToBottom = (gap < 2 || (wasAtBottom && !scrolledUp)) && (timelineRows?.atTail() ?? true);
+    const byUser = scrollbarHeld || performance.now() - userScrollAt < USER_SCROLL_MS;
+    stickToBottom = (gap < 2 || (wasAtBottom && !(byUser && scrolledUp))) && (timelineRows?.atTail() ?? true);
     if (stickToBottom && gap >= 2) timelineViewport?.scrollToBottom(false);
     farFromLatest = gap > 240 || !(timelineRows?.atTail() ?? true);
     if (stickToBottom && !wasAtBottom) queueReadReceipt();
@@ -1963,6 +1978,8 @@
   bind:innerWidth={viewportWidth}
   on:keydown={onKeydown}
   on:pointerdown={closeRoomMenuOutside}
+  on:pointerup={releaseScrollbar}
+  on:pointercancel={releaseScrollbar}
 />
 
 {#if !booted}
@@ -2659,7 +2676,7 @@
           on:wheel={noteUserScroll}
           on:touchmove={noteUserScroll}
           on:keydown={onTimelineKey}
-          on:pointerdown={noteUserScroll}
+          on:pointerdown={onTimelinePointer}
           aria-label={`Messages in ${selectedRoom.name}`}
         >
           <div class="timeline-inner" use:pinTimeline>

malice

Commit d1818305ffd6

Commit `d1818305ffd6`