Ok maybe fix scrolling

This commit is contained in:
Eric Bailey
2025-05-31 18:33:22 -05:00
parent d9866f8ada
commit 11001172b3
+13 -14
View File
@@ -104,39 +104,40 @@ export function Inner({uri}: {uri: string | undefined}) {
/** /**
* WEB ONLY * WEB ONLY
* *
* Fires any time the content of the list changes. If user switches back to a * Needed after clicking into a post. This handler ensures that once the
* sort that was rendered previously, this does NOT fire. Therefore, scroll * parents load in, the anchor post is still at the top of the screen.
* is only reset to the anchor on initial render, or fresh data.
* *
* When this fires, the `List` is scrolled all the way to the top, so * When this fires, the `List` is scrolled all the way to the top, so
* measurements taken from `top` correspond to the top of the screen. This * measurements taken from `top` correspond to the top of the screen. This
* handler scrolls the `List` to the top of the highlighted post, minus any * handler scrolls the `List` to the top of the highlighted post after
* fixed elements. * parents are prepended, offset by any fixed elements like the header.
*/ */
const hasScrolledToAnchor = useRef(false)
const onContentSizeChangeWebOnly = web(() => { const onContentSizeChangeWebOnly = web(() => {
const anchorElement = anchorRef.current as any as Element const anchorElement = anchorRef.current as any as Element
const headerElement = headerRef.current as any as Element const headerElement = headerRef.current as any as Element
if (anchorElement && headerElement) { if (
anchorElement &&
headerElement &&
!deferParents &&
!hasScrolledToAnchor.current
) {
// distance from top of the list (screen) // distance from top of the list (screen)
const anchorOffsetTop = anchorElement.getBoundingClientRect().top const anchorOffsetTop = anchorElement.getBoundingClientRect().top
const headerHeight = headerElement.getBoundingClientRect().height const headerHeight = headerElement.getBoundingClientRect().height
const scrollPosition = anchorOffsetTop - headerHeight const scrollPosition = anchorOffsetTop - headerHeight
// console.log({
// anchorOffsetTop,
// headerHeight,
// scrollPosition,
// })
/* /*
* If scroll position is negative, it means the anchor post is above the * If scroll position is negative, it means the anchor post is above the
* top of the screen, meaning the user scrolled the list. In that case, * top of the screen, meaning the user scrolled the list. In that case,
* we want to restore the previous scroll position by not scrolling here * we want to restore the previous scroll position by not scrolling here
* at all. * at all.
*/ */
if (scrollPosition >= 0) { if (scrollPosition >= headerHeight) {
listRef.current?.scrollToOffset({ listRef.current?.scrollToOffset({
animated: false, animated: false,
offset: scrollPosition, offset: scrollPosition,
}) })
hasScrolledToAnchor.current = true
} }
} }
}) })
@@ -158,14 +159,12 @@ export function Inner({uri}: {uri: string | undefined}) {
const hasExhaustedReplies = useRef(false) const hasExhaustedReplies = useRef(false)
const onStartReached = () => { const onStartReached = () => {
// console.log('onStartReached')
if (isFetching) return if (isFetching) return
// limit to 100 // limit to 100
setMaxParentCount(n => Math.min(100, n + PARENT_CHUNK_SIZE)) setMaxParentCount(n => Math.min(100, n + PARENT_CHUNK_SIZE))
} }
const onEndReached = () => { const onEndReached = () => {
// console.log('onEndReached')
if (isFetching) return if (isFetching) return
// prevent any state mutations if we know we're done // prevent any state mutations if we know we're done
if (hasExhaustedReplies.current) return if (hasExhaustedReplies.current) return