How to fetchPreviousPage in infinite scroll example

[derochedesign]

Hey all, in the infinite scroll example it uses essentially this:

useEffect(() => {
  const list = virtualList.getVirtualItems();
  const [lastItem] = [...list].reverse();

  if (!lastItem) return;
  if (lastItem.index >= items.length - 1 && moreDataAvailable && !isLoading) {
    setIsLoading(true);
    setCurrentPage((prev) => prev + 1);
  }
  //etc

to determine when to fetch the next page of information. I'm wondering how to do the opposite, aka detect when to fetch the previous page. I've tried this:

else if (lastItem.index <= currentPage * itemsPerPage && !isLoading) {
  if (currentPage === 1) return;
  setIsLoading(true);
  setCurrentPage((prev) => prev - 1);
}

but, although this does seem to work well at first, it starts to become less reliable (such as when zooming the webpage out to 30%)

Am I on the right track with this or is there something I'm missing?

[piecyk]

I'm wondering how to do the opposite, aka detect when to fetch the previous page

when scrolling back to top of the list you want to fetch previous page, by checking fist item. Reversed loading is bit tricky, checkout this discussions #195