How to use scrollToItem with InfiniteLoader?

Hi,

I’m a little confused about how to call scrollToItem() when the VariableSizedList is within an InfiniteLoader tag. My understanding is that you would use createRef() to assign a new ref to the list, but there is already a ref getting passed down. I’ve tried running scrollToItem on this latter ref, but it doesn’t work:

	return (
		<InfiniteLoader
  			isItemLoaded={isItemLoaded}
  			itemCount={itemCount}
  			loadMoreItems={loadMoreItems}
		>
		  {({ onItemsRendered, ref }) => {
			if (scrollTargetBlockIndex>0) {
				ref.current.scrollToItem(scrollTargetBlockIndex);
				scrollToConsumerSuccess();
			};
		  	return (
 			<AutoSizer>
			{
				({height, width}) => (
					<VariableSizeList
				    	height={height}
				    	width={width}
				    	itemCount={consumerBlocks.length}
				    	itemSize={getItemSize}
				    	onItemsRendered={onItemsRendered}
				    	ref={ref}
				    	overscanCount={4}
				    	minimumBatchSize={20}
				  	>
				    {Row}
				   </VariableSizeList>
				)
			}
			</AutoSizer>
		  )}}
		</InfiniteLoader>
	);

The key line is

ref.current.scrollToItem(scrollTargetBlockIndex);

How should I do this? Is it possible?

Thank you in advance.

Simon

[danielcruser]

@manacoa I just dealt with something like this myself.

What worked for me was

const Component = () => {
    // bunch of code 
    const virtualLoaderRef = useRef(null);

    const customHandleScroll = ({ visibleStartIndex }) => {
        if (// logic for whether to trigger scroll) {
             virtualLoaderRef.current._listRef.scrollToItem(indexYouWantToScrollTo)
        }
     }

   return (
      <InfiniteLoader
        ref={virtualLoaderRef}
        isItemLoaded={isItemLoaded}
        itemCount={totalCount} 
        loadMoreItems={loadMoreItems}
        threshold={threshold}
      >
        {({ onItemsRendered, ref }) => (
          <VariableSizeList
            onItemsRendered={({
              overscanStartIndex,
              overscanStopIndex,
              visibleStartIndex,
              visibleStopIndex
            }) => {
              onItemsRendered({
                overscanStartIndex,
                overscanStopIndex,
                visibleStartIndex,
                visibleStopIndex
              });
              customHandleScroll({ visibleStartIndex });
            }}
            ref={ref}
            height={800}
            itemCount={totalCount}
            itemSize={getItemSize}
            itemData={itemData}
            width={300}
            itemKey={itemKey}
          >
            {Row}
          </VariableSizeList>
        )}
      </InfiniteLoader>
  )
}

key line being virtualLoaderRef.current._listRef.scrollToItem(indexYouWantToScrollTo) in conjunction with setting the ref on InfiniteLoader

Hope that’s helpful

[johnnyoshika]

It would be nice if _listRef was exposed publicly.

@bvaughn had an alternative suggestion here: https://github.com/bvaughn/react-window/issues/324#issuecomment-528887341

His proposed solution doesn’t work for me, however, as it results in a whole bunch of typescript errors, so I’ll use _listRef for now.