diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte index d4a8bd22..91a2c007 100644 --- a/src/routes/spaces/[relay]/[h]/+page.svelte +++ b/src/routes/spaces/[relay]/[h]/+page.svelte @@ -4,6 +4,7 @@ import {page} from "$app/stores" import {goto} from "$app/navigation" import type {Readable} from "svelte/store" + import {debounce} from "throttle-debounce" import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app" import {now, ifLet, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib" import type {MakeNonOptional} from "@welshman/lib" @@ -244,6 +245,8 @@ const onScroll = () => { if (!isProgrammaticScroll) { userHasScrolled = true + isUserScrolling = true + clearIsUserScrolling() manageScrollPosition() } @@ -265,6 +268,7 @@ let leaving = $state(false) let userHasScrolled = $state(false) let isProgrammaticScroll = $state(false) + let isUserScrolling = $state(false) let loadingBackward = $state(true) let loadingForward = $state(true) let share = $state(popKey("share")) @@ -278,6 +282,10 @@ let compose: RoomCompose | undefined = $state() let eventToEdit: TrustedEvent | undefined = $state() + const clearIsUserScrolling = debounce(150, () => { + isUserScrolling = false + }) + const elements = $derived.by(() => { const elements = [] const seen = new Set() @@ -351,7 +359,7 @@ }) $effect(() => { - if (elements.length > 0) { + if (elements.length > 0 && !isUserScrolling) { requestAnimationFrame(manageScrollPosition) } }) diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte index e50fcd3a..275ba411 100644 --- a/src/routes/spaces/[relay]/chat/+page.svelte +++ b/src/routes/spaces/[relay]/chat/+page.svelte @@ -4,6 +4,7 @@ import {goto} from "$app/navigation" import type {Readable} from "svelte/store" import {readable} from "svelte/store" + import {debounce} from "throttle-debounce" import {now, int, ifLet, formatTimestampAsDate, MINUTE, ago} from "@welshman/lib" import type {TrustedEvent, EventContent} from "@welshman/util" import {makeEvent, MESSAGE, RELAY_ADD_MEMBER} from "@welshman/util" @@ -139,6 +140,8 @@ const onScroll = () => { if (!isProgrammaticScroll) { userHasScrolled = true + isUserScrolling = true + clearIsUserScrolling() manageScrollPosition() } @@ -160,6 +163,7 @@ let loadingForward = $state(true) let userHasScrolled = $state(false) let isProgrammaticScroll = $state(false) + let isUserScrolling = $state(false) let share = $state(popKey("share")) let parent: TrustedEvent | undefined = $state() let element: HTMLElement | undefined = $state() @@ -171,6 +175,10 @@ let compose: RoomCompose | undefined = $state() let eventToEdit: TrustedEvent | undefined = $state() + const clearIsUserScrolling = debounce(150, () => { + isUserScrolling = false + }) + const elements = $derived.by(() => { const elements = [] const seen = new Set() @@ -244,7 +252,7 @@ }) $effect(() => { - if (elements.length > 0) { + if (elements.length > 0 && !isUserScrolling) { requestAnimationFrame(manageScrollPosition) } })