Any guidance on a reversed virtual list with dynamic elements?

[cmseguin]

We have been using react-virtual for a few months, and love the fact that the library is headless and allow us to do things our way... However, we are trying to build a chat-like virtual list that starts at the bottom, we then prepend elements to the list when we reach the top. Nothing too fancy except that the messages have fairly variable sizes.

The problems started to show up when we started experimenting with bigger messages... It seems that if we used a list that would not start from the bottom we would not have nearly as many issues... Mostly because the height of the list gets calculated and as you usually scroll down, the list height expands but you are left at the same scroll position (so nothing more than a little flicker in the scrollbar). However when the list is inverted and the elements above your overscan are rendered, the height of the elements pushes the elements that are in view downward (happens only when the estimate size is not 100% correct).

Furthermore, we have a functionality to scroll to the bottom of the list which we achieve by scrolling to a big offset. The reason for that is due to the padding at the bottom, scrollToIndex would not work for us. However since our estimate function is not 100% accurate the scroll happens as follow:

1. scroll to the bottom
2. render happens and list height is increased (no longer at bottom)

It seems that this is something inevitable, and that is why we have a double scroll in the scrollToIndex.

So I was wondering if anyone has ever done a reversed list with dynamic elements and could give some guidance, or create an example.

[kidroca]

The only thing that worked for us so far is a double scaleY(-1) hack borrowed from react-native virtual list inversion

As you've noticed both prepending or appending an item would change scroll height, but prepending pushes visible content while appending does not

The scaleY hack would make everything work in reverse

• your first item (index 0) will be rendered on the bottom
• scrollToIndex(0) would scroll to the bottom
• pushing more items would add them to the top, but now that's the natural direction in which the list expands

It's relatively easy to try it out, but it has some potential drawbacks

• accessibility - screen readers would disregard css and would read the non inverted list - it would be as if they read the list from bottom to top
• text selection - if you select some content and copy it, it will be pasted in reverse order

So here it is:

1. Order you items (array) so that index: 0 is the message you expect to be on the bottom
2. Add transform: scaleY(-1) to the parentRef element styles (the element that is scrollable)
3. Add transform: translateY(${({ translateY }) => translateY}px) scaleY(-1); to each row item

Pushing more items would add them to the top but would not cause scroll/content issues

Since your case is a chat - I'm not sure whether there won't be the same problem when new messages arrive and they need to be added to the bottom. It might be possible to just scroll to index 0 (bottom) when new messages arrive (if you were already on the bottom)
Otherwise you'll need to readjust scroll position by the change in totalSize of the list - if the (inverted) list grew by 200px when new message are received then you need to scroll to current scrollTop - 200

For our case the scaleY hack works
We have a virtual list that is dynamically filled with days for 3 years (like 1000 days)
The days/weeks content is only loaded when they are scrolled into view - initially a placeholder element is rendered
We can jump to the middle and skip loading some days (e.g. jump from now to 2 years ago)
As we scroll up/down the days are loaded and they dynamically expand the rows - this used to mess our scroll position
So far nothing but the scaleY had made scrolling reliable without content being pushed unexpectedly by days/rows materializing and changing height

BTW you also have to invert the mouse wheel scroll like:

    useEffect(() => {
      const el = parentRef.current;

      const invertedWheelScroll = (event) => {
        el.scrollTop -= event.deltaY;
        event.preventDefault();
      };

      el.addEventListener('wheel', invertedWheelScroll, false);

      return () => el.removeEventListener('wheel', invertedWheelScroll);
    }, []);

[lexahall]

Have you had any success with keyboard navigation with this method? I tried this and tab works in the reverse order. Arrow keys work in the correct order until you hit the edge of the viewable area, and then it will try to scroll more item into view but scrolls in the opposite direcition. Have you hit either of these issues?

[jpribyl]

Man, this gets hairy- you gotta

1. render the elements invisibly to the real dom via portal
2. use those invisible elements to extract + set the height on you virtualized elements
3. (assuming you want overscan) maintain a list of elements that are currently visible separate from react-virtual (maybe something like react-intersection-observer)
4. build a map between the key / id field of your visible elements and their virtualized indexes so that you can get the figure out what the index is when you prepend new items to your virtual component. Alternatively you might be able to map by the number of items you prepend (OLD_INDEX + PAGE_SIZE or something)
5. probably more that I'm forgetting?

EDIT/UPDATE I think you can actually do 4. with the rangeExtractor which is a good bit simpler + cleaner

I have a loosely passable POC but it's not in a good state to share at the moment. happy to discuss + send snippets if there is still interest.

This blog post was helpful for me
https://medium.com/trabe/measuring-non-rendered-elements-in-react-with-portals-c5b7c51aec25

[jpribyl]

@agamrp let me know if you manage to solve the scrollToOffset rather than scrollToIndex issue so that we can hit exactly the right pixel rather than a small content jump!!

I've flung myself at it a couple times and gotten close but it's super tricky because there is no "wait for scroll to complete" in JS.. so the issue that I have seen is that scroll height jumps around too much with that approach.

One option might be to use both? IE use index to get a rough position and avoid a big jump and then later use offset to fine tune? Haven't really tried that approach yet.

[agamrp]

@jpribyl Have a favor to ask if you have time. Have you tested your solution on iOS and Safari yet?

I've played around with other virtualized libraries that have prepending built in but run into weird behavior where while scrolling up the list will sometimes jump to the top of the new data instead of keeping scroll position, along with some flickering. If you scroll slowly up then it keeps scroll position better. I was hoping you may have figured out a way to solve this? Or a way to cancel scroll events while data is being loaded?

Attaching video to help clarify:

Blinking.And.Jumping.720.mov

[jpribyl]

Hmm, I haven't really played around with it- I do most of my dev work on firefox + chrome but I'll take a look next time I have a mac in front of me.

[agamrp]

Got it thanks, yeah appreciate it when you get a chance and also if you get hold of iOS device to try it on. I'll let you know what I find out on my end

[jpribyl]

@agamrp just FYI I have played around with it a bit on safari

while scrolling up the list will sometimes jump to the top of the new data instead of keeping scroll position

I have not seen this, thankfully

along with some flickering

There is a small amount of occasional flickering. But tbh it's pretty rare and not very noticeable so I don't plan to really look into it more at this point. I think it could be mitigated with better loading strategies.

The largest issue I am still grappling with is images. They aren't available when the initial measurement takes place which means you must either

• know their size before loading them (IE store images with their size) or coerce them into a specific height
• come up with some way to scroll as they load (maybe an onload handler)
• prevent render until they're loaded
• lazy load them
• something else?

Haven't had a ton of time to devote to it but all in all it's working pretty darn well

[piecyk]

I think we can go with this https://codesandbox.io/s/beautiful-meninsky-fr6csu?file=/pages/index.js

The trick is to update scroll offset in same time when new items are prepend, and reverse indexes.

[velidan]

Thank you for your idea Damian. Could you, please, help me to understand what is the purpose of this code?

  const [paddingTop, paddingBottom] =
    items.length > 0
      ? [
          Math.max(0, items[0].start - virtualizer.options.scrollMargin),
          Math.max(0, virtualizer.getTotalSize() - items[items.length - 1].end),
        ]
      : [0, 0];

I debugged it at paddingTop is only one time become to 480px and then it become 0 and never won't be positive number again. I'm just really curious about it. Without it the scroller is incorrectly positioning itself hovewer still can't understand how this prop works

@piecyk

[zirlman]

Here's how the code works:

The items array contains information about the virtual items that are currently visible in the container. Each virtual item represents a paragraph, and contains information about its size and position.

The paddingTop variable is calculated by subtracting the start position of the first virtual item from the scrollMargin option of the virtualizer. The scrollMargin option is used to add extra padding to the top and bottom of the container, to ensure that the first and last virtual items are not cut off when the user scrolls through the container.

The paddingBottom variable is calculated by subtracting the end position of the last virtual item from the total size of the virtualizer. This ensures that the last virtual item is not cut off when the user scrolls to the bottom of the container.

If there are no virtual items in the container, the paddingTop and paddingBottom variables are set to 0.

The paddingTop and paddingBottom variables are then used to set the paddingTop and paddingBottom styles of the chat bubble container, using the style prop.

Overall, this code block is used to calculate the padding for the top and bottom of the container, to ensure that the first and last paragraphs are not cut off when the user scrolls through the container.

Source: Copilot

[Zerebokep]

Could you provide same example but with useVirtualizer (not window)

@abdullaev388 the idea is the same, only difference is that you need to pass scroll element https://codesandbox.io/p/sandbox/frosty-morse-scvryz

@piecyk your sample works perfectly, thank you for that. I'm currently trying to add a scroll-to-bottom on submit feature to it, but I can't get it to work that way, it always scrolls to the second last message, no matter what I try, even using a very large offset doesn't seem to help:

  if (
    virtualizerRef.current &&
    count !== virtualizerRef.current.options.count
  ) {
    if (scrollRef?.current) {
      virtualizerRef.current.scrollOffset = scrollRef.current.offset
      virtualizerRef.current.scrollToOffset(
        scrollRef.current.offset,
        scrollRef.current.scrollToOptions
      )
      scrollRef.current = null
    } else {
      const delta = count - virtualizerRef.current.options.count
      const nextOffset =
        virtualizerRef.current.scrollOffset + delta * messageSize

      virtualizerRef.current.scrollOffset = nextOffset
      virtualizerRef.current.scrollToOffset(nextOffset, { align: 'start' })
    }
  }

I set scrollRef inside the onSubmit callback.

[xarchx127]

@piecyk Thank you for your sample! Could you provide same example that works with bi-directional infinite query? I tried but just couldn't get the padding correct

[piecyk]

@xarchx127 something like https://stackblitz.com/edit/tanstack-query-p2sjt5nc?

[novykh]

Hello, I ended up in this issue a couple of days ago searching for an efficient way to have two-direction infinite loader+scrolling with virtual and react-table. Your answers above helped a lot and I ended up with an approach that I believe works well enough. (Still wip - especially from the perf aspect)

I work at netdata and you can check the end result (without signup or anything) here.

480p.mov

I used both react-table and react-virtual.
For the table, I created a flex implementation with a big component tree for every row, which made things more difficult performance wise, but managed to fix it through caching (yeah I know @tannerlinsley you love the table re-rendering freely, but it wasn't possible to allow it in this use case, so please bear with me).

Now for the problem at hand, bi-directional infinite scrolling, I used the usual implementation for infinite loading with the difference of adding a second useEffect to check if the virtualRows are on top of the table, and if there are more items to fetch to issue the request for them. This of course created the issue to the virtualizer, since changing (prepending) the data was instantly changing the top virtualItem to the new one - which in turn was requesting again for more items, resulting in an infinite loop.

The gist of what I used is this:

   const retryRef = useRef(0)
   
   useLayoutEffect(() => {
      // Check if data length changed and we need to check if the response that changed the data was of direction forward (going up that is)
      if (prevDataLengthRef.current !== data.length && latestDirection === "forward") {

        // Find the current scroll offset
        const offset = virtualRef.current.scrollOffset
        let dummyOffset = 0
        let scrolledItem = virtualRef.current.getMeasurements().find(measurement => {
          dummyOffset = dummyOffset + measurement.size
          return dummyOffset > offset
        })

        // If we don't find any, then we get the first element
        if (!scrolledItem) {
          scrolledItem = virtualRef.current.getMeasurements()[0]
        }

        // OK if we don't find an element again then just leave
        if (!scrolledItem) return

        // We keep the scrolled data item (we need it's identifier)
        topElementRef.current = data[data.length - prevDataLengthRef.current + scrolledItem.index]
      }

      const tryScrollToOffset = () => {
        if (topElementRef.current && retryRef.current < 5) {
          retryRef.current = retryRef.current + 1
          prevDataLengthRef.current = data.length
          const anchor = topElementRef.current.id // or an unique identifier that works on your data

          // Try to find the new measurement (we prepended rows, so the previous measurement is not at the same index as before)
          let item = virtualRef.current
            .getMeasurements()
            .find(measurement => measurement.key === anchor) // Supplied a `getItemKey` to the virtualizer to get the data id
          
          // If none found, fallback to blind index searching based on data in our state
          if (!item) {
            const index = data.findIndex(rowData => rowData.id == anchor)
            item = virtualRef.current.getMeasurements()[index]
          }

          // If none found again, then abort and stay on top of the table
          if (!item) {
            retryRef.current = 5 // break
            topElementRef.current = null
            return
          }

          // Try to scroll to offset
          virtualRef.current.scrollToOffset(item.start - topElementRef.current.headerSize)
          
          // Even if you do scroll, retry to be certain - Needed only on dynamic measurement lists
          setTimeout(tryScrollToOffset)
          return
        } else {
          retryRef.current = 5
          topElementRef.current = null
        }
      }
      tryScrollToOffset()

      prevDataLengthRef.current = data.length
    }, [data])

So in our use case:

• The user clicks on the chart to scroll to that timestamp
• After we scroll there, we are in the middle of the table, so we need to fetch more data to prepend
• After prepended data comes in, the useEffect above get's triggered and scrolls user back to the first step's first index.

The same happens when the user keeps scrolling up and fetches more and more data. All of the above are happening with just a small flickering the minute before scrollToOffset gets triggered (especially when there are big differences in the measurements between every line.

Hope this helps anyone who wants to try something similar.

[ArianHamdi]

@Blackening999 like here https://stackblitz.com/edit/tanstack-query-xrw3fp?file=src%2Fpages%2Findex.js

Man, you literally saved me after 2 days of trying to solve this issue, thank you so much. 🔥

[Xhale1]

@piecyk that example is working great! I have a strange issue thought which I can't reproduce on the oft-chance you have an idea as to what's happening.

Some of my users randomly get in a state where the infinite scroller gets "stuck" after a scrollToIndex call. Scrolling up causes a strange bouncing behavior where the scroller seems to keep "pulling" the user to a certain position. Using the middle mouse wheel button seems to fix the issue

[piecyk]

@Xhale1 hard to say, are the items dynamic? Mybe after they are loaded virtualiser is trying to sync the scroll, check what is calling scroll, checkout the shouldAdjustScrollPositionOnItemSizeChange.

[Xhale1]

Interesting. I fiddled around with shouldAdjustScrollPositionOnItemSizeChange and a few other changes and haven't been able to get a proper fix to stick. My items are dynamic but they don't change size over time and they shouldn't have any async logic (media has fixed heights)

I added some hacky code where I console.log everywhere I call a scroll function and nothing appears to be getting called. I'll add some additional logging to shouldAdjustScrollPositionOnItemSizeChange and see what shoes up

I'd love to help contribute to a chat-like reverse infinite scroll if that's something you're interested in

Last question: in this example you made last year you a useRef for the virtualizer and padding for offsets, but the above example seems a great deal more simple. Is there any particular reason for doing it one way or another?

[gs03-dev]

@Blackening999 like here https://stackblitz.com/edit/tanstack-query-xrw3fp?file=src%2Fpages%2Findex.js

this legit just saved me an endless time of researching 😅 , thanks!

[avdb13]

Did somebody have success reversing the arrow and home/end keys already?

[mechanicalbot]

if anyone is interested, I have managed to create a reversed chat-like layout with flex-direction: column-reverse

https://stackblitz.com/edit/vitejs-vite-e28dau?file=src%2FVirtualList.tsx

Component for reference

import React, { CSSProperties, useCallback, useEffect, useRef } from 'react';
import { VirtualItem, useVirtualizer } from '@tanstack/react-virtual';

export type VirtualListProps<T> = {
  className?: string;
  style?: CSSProperties;
  itemClassName?: string;
  itemStyle?: CSSProperties;
  items: T[];
  getItemKey: (item: T, index: number) => string | number;
  renderItem: (item: T, virtualItem: VirtualItem) => React.ReactNode;
  estimateSize: (index: number) => number;
  overscan?: number;
};

export function VirtualList<T>({
  style,
  itemStyle,
  items,
  getItemKey,
  estimateSize,
  renderItem,
  overscan,
}: VirtualListProps<T>) {
  const scrollableRef = useRef<HTMLDivElement>(null);

  const getItemKeyCallback = useCallback(
    (index: number) => getItemKey(items[index]!, index),
    [getItemKey, items]
  );

  const virtualizer = useVirtualizer({
    count: items.length,
    getItemKey: getItemKeyCallback,
    getScrollElement: () => scrollableRef.current,
    estimateSize,
    overscan,
    debug: true,
  });

  useEffect(
    function scrollToEnd() {
      virtualizer.scrollToIndex(items.length - 1);
    },
    [items]
  );

  const virtualItems = virtualizer.getVirtualItems();

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column-reverse',
        ...style,
      }}
    >
      <div
        ref={scrollableRef}
        style={{
          overflow: 'auto',
        }}
      >
        <div
          style={{
            width: '100%',
            position: 'relative',
            height: virtualizer.getTotalSize(),
          }}
        >
          <div
            style={{
              position: 'absolute',
              top: '0',
              left: '0',
              width: '100%',
              transform: `translateY(${virtualItems[0]?.start ?? 0}px)`,
            }}
          >
            {virtualItems.map((virtualItem) => {
              const item = items[virtualItem.index]!;

              return (
                <div
                  key={virtualItem.key}
                  ref={virtualizer.measureElement}
                  data-index={virtualItem.index}
                  style={itemStyle}
                >
                  {renderItem(item, virtualItem)}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

[piecyk]

@mechanicalbot great, one note is that getItemKey should be stale as otherwise will re-create measurements cache on every re-render

[mechanicalbot]

thanks for the tip, example updated

[jkchuynh829]

@mechanicalbot does this work with dynamic size elements? e.g. chat UI

[Giancarlo-Ma]

if the items are only a few, it will be at bottom, how to make it top when only a few items that can't fill one screen

[adroste]

I just solved it by making sure estimateSize is always larger than the list elements.

  const virtualizer = useVirtualizer({
    estimateSize: () => 999,
    // ...
  });

  // ...

  useEffect(
    () => {
      virtualizer.scrollToIndex(items.length - 1);
    },
    [items]
  );

[jaydedm]

Yeah, this is a tough problem. The engineering effort to implement a ChatRoom-like feature with TanStack virtual seems massive. A bidirectional, infinite loader just doesn't seem possible without side effects that create a pretty poor UX when it comes to loading in paginated messages in the scroll window. It would be amazing to work together to create something easy to use like message list provided by virtuoso, albeit not for free.

[jaydedm]

@henryogunrinde well quit teasing us!

[henryogunrinde]

Lol, can you give me a fork of a codepen or similar that uses tanstack query and virtual, so i can make changes on it. That should make it easier for me.

[piecyk]

@henryogunrinde you can share the adjust position after to items loaded, like in this example #195 (reply in thread)

scroll is adjusted if addedToTheBeginning

const firstId = data?.pages[0].nextId ?? 0;
const addedToTheBeginning = firstId < prevId;
prevId = firstId;

if (addedToTheBeginning) {
  const offset = (virtualizer.scrollOffset +
    (data?.pages[0].data ?? []).length * itemSize);
  virtualizer.scrollOffset = offset;
  virtualizer.calculateRange();
  virtualizer.scrollToOffset(offset, { align: 'start' });
}

[henryogunrinde]

@piecyk I will type it here, give me some minutes.

[wongvc92]

@piecyk I will type it here, give me some minutes.

hi do you have the code? thanks.

[henryogunrinde]

@piecyk I have extracted the relevant snippets, just to give you an idea.

const Dynamic = () => {
  const prevDataRef = useRef<typeof data>();
  const scrollerRef = useRef<HTMLDivElement | null>(null);
  const virtualizerRef = useRef<Virtualizer<
    HTMLDivElement,
    HTMLDivElement
  > | null>(null);

  const {data} = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: async ({pageParam}) => {
      const res = await axios.get('/api/projects?cursor=' + pageParam);
      return res.data;
    },
    initialPageParam: 0,
    maxPages: 3, // Must be greater than 2
    getPreviousPageParam: (firstPage) => {
      return firstPage.previousId ?? undefined
    },
    getNextPageParam: (lastPage) => {
      return lastPage.nextId ?? undefined
    },
  });

  // ℹ️ Since this is a bidirectional infinite loader, when you scroll
  // to the start of the list, items are added to the top. Also, as you
  // scroll to the end of the list, older items at the top will be removed
  // to maintain optimal performance. This will cause a layout shift, and
  // we need to do scroll anchoring at this point. firstItemOffset is the
  // total number of items that was added or removed from the top.

  // PS: Negative value implies removal.
  const firstItemOffset = calculateOffset(data, prevDataRef.current);

  // ℹ️ This prevents multiple executions of the restoreScrollOffset function,
  // which occurs in React StrictMode where useEffects will run twice
  const restoredScrollOffsetRef = useRef<boolean>(false);

  useLayoutEffect(() => {
    // ℹ️ We can reset this flag at this point.
    restoredScrollOffsetRef.current = false;

    prevDataRef.current = data;
  });

  const restoreScrollOffset = useCallback(
    (firstItemOffset: number) => {
      if (firstItemOffset === 0) return;
      if (restoredScrollOffsetRef.current) return;
      if (!virtualizerRef.current) return;

      const virtualizer = virtualizerRef.current;

      if (firstItemOffset > 0) {
        // ℹ️ Re-calculate the measurementsCache
        // to get the size of newly added items.
        virtualizer.calculateRange();
      }

      // ℹ️ When items are removed, this function should be called before the
      // useVirtualizer hook so that we can get the size of the removed items.
      // Conversely, when items are added, it should be called after the hook,
      // so that we can get the size of the added items.
      const offsetItemCache =
        virtualizer.measurementsCache[Math.abs(firstItemOffset)];

      const delta =
        offsetItemCache.start -
        virtualizer.options.paddingStart -
        virtualizer.options.scrollMargin;

      const scrollOffset = virtualizer.scrollOffset;
      const adjustments = firstItemOffset < 0 ? -delta : delta;

      scrollToOffset(virtualizer, scrollOffset, {
        behavior: undefined,
        adjustments: adjustments
      });

      // Set the scrollOffset within this render,
      // to display the current range of items.
      virtualizer.scrollOffset = scrollOffset + adjustments;
      restoredScrollOffsetRef.current = true;
    },
    []
  );

  // ⚠️ This is done before the useVirtualizer hook so that we can
  // use the measurement cache of the removed items before the
  // cache is reset in the virtualizer instance.
  useMemo(() => {
    if (firstItemOffset < 0) {
      restoreScrollOffset(firstItemOffset);
    }
  }, [firstItemOffset, restoreScrollOffset]);

  const listItems = useMemo(
    () => data.pages.flatMap((page) => page.data) ?? [],
    [data]
  );

  virtualizerRef.current = useVirtualizer({
    count: listItems.length,
    getScrollElement: () => scrollerRef.current,
    getItemKey: useCallback((index) => listItems[index].id, [listItems]),
    estimateSize: () => 150,
  });

  const virtualizer = virtualizerRef.current;

  // ⚠️ This is done after the useVirtualizer hook so that we can
  // use the measurementsCache of the added items.
  useMemo(() => {
    if (firstItemOffset > 0) {
      restoreScrollOffset(firstItemOffset);
    }
  }, [firstItemOffset, restoreScrollOffset]);

  if (firstItemOffset === 0) {
    // ℹ️ When there is no change to the first item,
    // we allow the scroll anchoring of the library.
    virtualizer.shouldAdjustScrollPositionOnItemSizeChange = undefined;
  } else {
    // ℹ️ If we need to do manual scroll anchoring for changes to the first item,
    // we will disable that of the library when items are removed, and we enable
    // it for newly added items, so that the scroll can be adjusted for their sizes.
    virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item) => {
      if (firstItemOffset < 0) {
        return false;
      } else {
        return item.index < Math.abs(firstItemOffset);
      }
    };
  }

  return (
    <div
      ref={scrollerRef}
      style={{
        height: "100%",
        width: "100%",
        // ℹ️ Disable browser scroll anchoring
        // since it affects restoreScrollOffset
        overflowAnchor: "none",
        overflowY: "auto"
      }}>
      {/* Other stuffs.*/}
    </div>
  );
};

function calculateOffset<Data>(data: any, prevData: any) {
  if (!data || !prevData) {
    return 0;
  }

  if (prevData.pageParams[0] === data.pageParams[0]) {
    return 0;
  }

  if (prevData.pageParams[0] === data.pageParams[1]) {
    return data.pages[0].data.length;
  } else if (prevData.pageParams[1] === data.pageParams[0]) {
    return -prevData.pages[0].data.length;
  } else {
    return 0;
  }
}

const scrollToOffset = (
  virtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>,
  offset: number,
  {
    adjustments,
    behavior
  }: {
    adjustments: number | undefined;
    behavior: ScrollBehavior | undefined;
  }
) => {
  virtualizer.options.scrollToFn(offset, {behavior, adjustments}, virtualizer);
};

[jaydedm]

You're a genius @henryogunrinde.

May tinker and see if I can get this working and create an easy abstraction for others

[henryogunrinde]

You are welcome, just give me credit on the abstraction you create, I would love to show my friends that I had a little impact here.

[jaydedm]

@henryogunrinde of course. I'm very busy trying to get some products ready for launch this holiday season, but after I can try and get some of this done. I promise, if a PR is made into TanStack Virtualizer that helps people do this by me, you will get all the credit you deserve!

[pribeh]

Any update on whether this might make it into the virtualizer

[ArianHamdi]

For anyone having issues with this package, We have just migrated to Virtua, and it's much better. It has a simpler API and more features. I suggest giving it a try.

[Fredkiss3]

I may have set it up weirdly

[ms-dosx86]

OMG, I struggled so hard to make tanstack/virtual work and yet it doesn't support reverse scrolling (and doesn't work with react compiler) but with Virtua I just one shot it. Works like a charm and has built in reverse scrolling. Thank you!

[Fredkiss3]

@ms-dosx86 is it possible for you to give a link to how you did it ? I've struggled to setup Virtua correcly, and it never worked for me...

[ms-dosx86]

@Fredkiss3 not a full example but I can share my chat container component's source code

export function ChatContainer(props: { serverId: number }) {
  const messages = useChat(useShallow(selectRoomMessages(props.serverId, 0)));
  const user = useUserStore((state) => state.user);
  const virtualRef = useRef<VListHandle>(null);
  const prevMessagesLengthRef = useRef(messages.length);

  // Scroll to bottom when appropriate
  useEffect(() => {
    if (messages.length > prevMessagesLengthRef.current) {
      const newMessage = messages[messages.length - 1];

      if (virtualRef.current) {
        // Calculate distance from bottom
        const distanceFromBottom =
          virtualRef.current.scrollSize -
          (virtualRef.current.scrollOffset + virtualRef.current.viewportSize);

        // Scroll if it's the user's own message
        if (newMessage && newMessage.sender_id === user?.id) {
          virtualRef.current.scrollToIndex(messages.length - 1, {
            align: "end",
          });
        }
        // Or if user is already near the bottom (within 100px)
        else if (distanceFromBottom < 100) {
          virtualRef.current.scrollToIndex(messages.length - 1, {
            align: "end",
          });
        }
      }
    }
    prevMessagesLengthRef.current = messages.length;
  }, [messages.length, user?.id]);

  return (
    <VList
      ref={virtualRef}
      style={{
        height: "100%",
        width: "100%",
        overflow: "auto",
      }}
      className="h-full overflow-auto pr-10"
      reverse
    >
      {messages.map((message, index) => (
        <ChatMessage
          key={message.id}
          message={message}
          serverId={props.serverId}
          className={index === 0 ? "" : "mt-2"}
        />
      ))}
    </VList>
  );
}

[bartekczyz]

@ArianHamdi thanks mate, worked like a charm 👌🏻

[ap0nia]

I have a proof of concept that leverages flex column reverse to reverse the elements, and padding-bottom to push the subset of visible items upward into the visible area.

https://stackblitz.com/edit/tanstack-virtual-ek9n4kke?file=src%2Fmain.tsx

A personal benefit of leveraging flex column reverse for me is just that this model works perfectly fine without virtualization, and virtualization can be turned on/off inconsequentially.

One issue I've experienced with this implementation is that it seems to have issues handling data that resizes after a delay, e.g. images. The padding bottom and scroll position seem to get muddled when that happens...

Here is the DOM structure.

<!-- Establishes viewing window. -->
<!-- Flex column reverse leverages browser overflow-anchor to stick to the bottom of the content. -->
<div className="flex flex-col-reverse size-100" ref={scrollElement}>

  <!-- Wrapper around the list that also sticks to the content at the bottom. ->
  <!-- Does not shrink in flexbox and occupies the designated height. -->
  <div className="flex flex-col-reverse shrink-0" height={virtualizer.getTotalSize()}>

    <!-- The reversed list. -->
    <!-- Only shows the visible items, and uses padding-bottom to push them into view. -->
    <ul className="flex flex-col-reverse" style={{ paddingBottom: virtualizer.items[0].start }}>

      {items.map((item) => {
         return (
           <li ref={virtualizer.measureElement} data-index={item.index}>
           </li>
         )
      }}

    </ul>
  </div>
</div>

This example applies two small patches to the existing virtualizer.
These features can also be added to the core library.

1. getScrollOffset.
   Overriding this method will enable reverse scrolling functionality.
   In flex column reverse, the scrollOffset is captured as negative number since you are scrolling from the bottom.
   All measurements in the library are positive, and this method can be patched to always return an absolute value.
   If implementing reverse functionality within the library, there could be a flag to handle or convert to and from negative values.

2. scrollToFn.
   Overriding this method will enable reverse scrollToIndex functionality.
   Since the measurements in the virtualizer are always positive,
   the scrollToFn function will always be called with a positive number.
   This will not work in flex column reverse if the scroll offsets
   are expected to be negative.

Here is the provided RowVirtualizerDynamic example with the two tweaks.

function RowVirtualizerDynamic() {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const [enabled, setEnabled] = React.useState(true)

  const count = sentences.length

  const virtualizer = useVirtualizer({
    count,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 45,
    enabled,

    // Override!
    scrollToFn(offset, options, instance) {
      return elementScroll(offset * -1, options, instance)
    },
  })

  // Override!
  React.useEffect(() => {
    // @ts-expect-error Overriding private method.
    const getScrollOffset = virtualizer.getScrollOffset

    // @ts-expect-error Overriding private method.
    virtualizer.getScrollOffset = () => Math.abs(getScrollOffset())
  }, [virtualizer])

  // Can work the same without virtualization.
  const items = enabled
    ? virtualizer.getVirtualItems()
    : sentences.map((_sentence, index) => {
        return { index }
      })

  return (
    <div>
      <button
        onClick={() => {
          virtualizer.scrollToIndex(0)
        }}
      >
        scroll to the top
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          virtualizer.scrollToIndex(count / 2)
        }}
      >
        scroll to the middle
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          virtualizer.scrollToIndex(count - 1)
        }}
      >
        scroll to the end
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          setEnabled((prev) => !prev)
        }}
      >
        turn {enabled ? 'off' : 'on'} virtualizer
      </button>
      <hr />
      <div
        ref={parentRef}
        className="List"
        style={{
          height: 400,
          width: 400,
          overflowY: 'auto',
          contain: 'strict',
          display: 'flex',
          flexDirection: 'column-reverse',
        }}
      >
        <div
          style={{
            height: virtualizer.getTotalSize(),
            display: 'flex',
            flexDirection: 'column-reverse',
            flexShrink: 0,
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column-reverse',
              paddingBottom: items[0]?.start ?? 0,
            }}
          >
            {items.map((virtualRow) => (
              <div
                key={virtualRow.key}
                data-index={virtualRow.index}
                ref={virtualizer.measureElement}
                className={
                  virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                }
              >
                <div style={{ padding: '10px 0' }}>
                  <div>Row {virtualRow.index}</div>
                  <div>{sentences[virtualRow.index]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

Bi-directional, infinite reverse scroll

In addition, Bi-directional infinite reverse scrolling can be implemented within this revision. Here is a proof of concept.

Please note that scrolling UP and loading more at the TOP should work perfectly fine because padding-bottom should remain the same.

However, scrolling DOWN and loading more at the BOTTOM will require a proper repositioning.

A proof of concept repositioner is provided, but it seems very janky...

function InfiniteRowVirtualizerDynamic() {
  const parentRef = React.useRef<HTMLDivElement>(null)

  const topRef = React.useRef<HTMLParagraphElement>(null)

  const bottomRef = React.useRef<HTMLParagraphElement>(null)

  const [mounted, setMounted] = React.useState(false)

  const query = useInfiniteQuery({
    queryKey: [],

    initialPageParam: length / 2,

    queryFn: async (context) => {
      await new Promise((resolve) => setTimeout(resolve, 1_000))

      const data = sentences.slice(context.pageParam, context.pageParam + size)

      return data
    },

    getNextPageParam: (_lastPage, _allPages, lastPageParam, _allPageParams) => {
      return lastPageParam < length ? lastPageParam + size : null
    },

    getPreviousPageParam: (
      _lastPage,
      _allPages,
      lastPageParam,
      _allPageParams,
    ) => {
      return lastPageParam > 0 ? lastPageParam - size : null
    },
  })

  const [enabled, setEnabled] = React.useState(true)

  const count = sentences.length

  const data = React.useMemo(() => {
    return query.data?.pages.flat() ?? []
  }, [query.data])

  const virtualizer = useVirtualizer({
    count: data.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 45,
    enabled,
    scrollToFn(offset, options, instance) {
      return elementScroll(offset * -1, options, instance)
    },
  })

  React.useEffect(() => {
    // @ts-expect-error Overriding private method.
    const getScrollOffset = virtualizer.getScrollOffset

    // @ts-expect-error Overriding private method.
    virtualizer.getScrollOffset = () => Math.abs(getScrollOffset())
  }, [virtualizer])

  // Scroll to the middle of the list once the page loads.
  React.useEffect(() => {
    if (!mounted && virtualizer.elementsCache.size) {
      virtualizer.scrollToIndex(Math.floor(data.length / 2))
      setMounted(true)
    }
  }, [virtualizer.elementsCache.size])

  React.useEffect(() => {
    if (!topRef.current || !mounted) return

    const observer = new IntersectionObserver(async (entries) => {
      if (!entries[0].isIntersecting || query.isFetchingNextPage) return

      await query.fetchNextPage()
    })

    observer.observe(topRef.current)
  }, [mounted, topRef])

  React.useEffect(() => {
    if (!bottomRef.current || !mounted) return

    const observer = new IntersectionObserver(async (entries) => {
      if (!entries[0].isIntersecting || query.isFetchingPreviousPage) return

      let previousOffset = virtualizer.scrollOffset || 0

      const result = await query.fetchPreviousPage()

      const index = result.data?.pages[0]?.length || 0

      if (!index) return

      virtualizer.scrollToIndex(index)

      setTimeout(async () => {
        const measurement = virtualizer.measurementsCache[index]

        const start = measurement?.start || 0

        const delta =
          start -
          virtualizer.options.paddingStart -
          virtualizer.options.scrollMargin

        const offset = previousOffset - delta

        virtualizer.scrollToOffset(Math.abs(offset))
        virtualizer.scrollOffset = offset
      }, 100)
    })

    observer.observe(bottomRef.current)
  }, [mounted, bottomRef])

  const items = virtualizer.getVirtualItems()

  const start = (query.data?.pageParams[0] as number) || 0

  return (
    <div>
      <button
        onClick={() => {
          virtualizer.scrollToIndex(0)
        }}
      >
        scroll to the top
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          virtualizer.scrollToIndex(count / 2)
        }}
      >
        scroll to the middle
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          virtualizer.scrollToIndex(count - 1)
        }}
      >
        scroll to the end
      </button>
      <span style={{ padding: '0 4px' }} />
      <button
        onClick={() => {
          setEnabled((prev) => !prev)
        }}
      >
        turn {enabled ? 'off' : 'on'} virtualizer
      </button>
      <hr />
      <div
        ref={parentRef}
        className="List"
        style={{
          height: 400,
          width: 400,
          overflowY: 'auto',
          contain: 'strict',
          display: 'flex',
          flexDirection: 'column-reverse',
        }}
      >
        {query.hasPreviousPage && (
          <p ref={bottomRef}>
            <span>Bottom</span>
            {query.isFetchingPreviousPage && (
              <span>Loading previous page...</span>
            )}
          </p>
        )}

        <div
          style={{
            height: virtualizer.getTotalSize(),
            display: 'flex',
            flexDirection: 'column-reverse',
            flexShrink: 0,
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column-reverse',
              paddingBottom: items[0]?.start ?? 0,
            }}
          >
            {items.map((virtualRow) => (
              <div
                key={virtualRow.key}
                data-index={virtualRow.index}
                ref={virtualizer.measureElement}
                className={
                  virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                }
              >
                <div style={{ padding: '10px 0' }}>
                  <div>Row {start + virtualRow.index}</div>
                  <div>{data[virtualRow.index]}</div>
                </div>
              </div>
            ))}
          </div>

          {query.hasNextPage && (
            <p ref={topRef}>
              <span>Top</span>
              {query.isFetchingNextPage && <span>Loading next page...</span>}
            </p>
          )}
        </div>
      </div>
    </div>
  )
}