scrollTop: any way to use it as initial scrollTop only?

[warpdesign]

I have some code like this:

<Table
   scrollTop{this.scrollTop}
   onScroll={this.onScroll}
>
</Table>

If this.scrollTop is undefined it works as expected: scrollTop defaults to 0, and if the user scrolls it works as expected.

If this.scrollTop is set to a value, this will correctly set the initial scrollTop of the table element. The problem is that if scrolling happens within the table after that, it will scroll, but then the scrollTop reverts to the this.scrollTop. It means there's no way to have the user scrolling after the scrollTop prop is set.

Is there a way to workaround this?

My use case is the following: I have several tabs in my app, each with a table (of course, there's only one Table element that's reused for each tabs, since only one tab may be visible at a time).

When say tab 1 is active, and the user scrolls, I want to save the scroll position, so that when the user switches to tab 2 and to tab 1 again, the scrollTop is set to the previous scroll position. But then the user may scroll, and this needs to ignore the initial scrollTop in that case.

[Kyle-Lowe]

I am experiencing a similar issue. We are using redux to preserve the scrollPosition for our r-v Table and once the user navigates to a different page and returns to the previous page there are some inconsistencies with scroll position of the list. The rows that are deemed "visible" look correct, but the actual scroll position shifts back up to the top even though I am providing the scrollTop property the offset integer that was stored in redux. I am going to continue troubleshooting and will follow up if I find an alternative method for preserving the scroll position.

[mashikag]

Is there a way to workaround this?

This is my way to work around this.

const MyList = () => {
  const scrollTopRef = useRef()
  const [forceScrollTop, setForceScrollTop] = useState()

  useEffect(() => {
    const scrollTop = scrollTopFromLocalStore()

    if (scrollTop !== null) {
      clearScrollTopFromLocalStore()
      setForceScrollTop(scrollTop)
    }

    return () => scrollTopToLocalStore(scrollTopRef)
  }, [])

  useEffect(() => {
    // We need to reset scrollTop value once it was consumed by the list because otherwise the user will be unable to scroll
    if (forceScrollTop !== undefined) {
      setForceScrollTop(undefined)
    }
  }, [forceScrollTop])


  const onScroll = useCallback(
    ({ scrollTop }) => {
      scrollTopRef.current = scrollTop
    },
    [scrollTopRef],
  )

  return (
      <List
        scrollTop={forceScrollTop}
        onScroll={onScroll}
        {...otherPropsHere}
      />
  )
}

[Darren120]

scrollTop={forceScrollTop}

bro, its 2023, and i stil cant seem to get scroll restoration to work without using your workaround

any update on having it work without workaround?