bidirectional infinite scroll

[francescoagati]

hello,
there is an example of bidirectional infinite scroll implmented with virtuoso? i have try to implements a merge of two example of prepend items and infinite scroll at the bottom but i have notice that with the scroll down react virtuoso is reseted

[khuezy]

Scrolling down is normal infinite scroll, you shouldn't update the firstItemIndex, that should only be set during prepend.
eg

const prependItems = useCallback(async () => {
    const newDataToPrepend = await fetchYourData();

      const nextFirstItemIndex = firstItemIndex - newDataToPrepend.length
      setFirstItemIndex(() => {
        return nextFirstItemIndex
      })
    setData((data) => [....newDataToPrepend, ...data])
  }, [deps...])


const appendItems = useCallback(async () => {
    const newDataToAppend = await fetchYourData();
    setData((data) => [...data, ...newDataToAppend])
  }, [deps...])

The gotcha is to set to firstItemIndex a very large number

const [firstItemIndex, setFirstItemIndex] = useState(10000) // adjust here