Ok maybe fix scrolling
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user