Detecting Partial Item Visibility in @tanstack/react-virtual Without Intersection Observer

[shivam-bit]

I'm working with @tanstack/react-virtual and want to implement a visibility-based animation mechanism where an item is considered "visible" even if just its first few pixels are in the viewport.
Current Approach
I've been exploring ways to determine item visibility directly within the virtualization library, specifically looking for a method that:

Works natively with react-virtual
Triggers when even a small portion of an item enters the view
Provides a reliable way to track partial visibility

Specific Questions

Is there a built-in method in react-virtual to detect partial item visibility?
Can the getVirtualItems() method or associated properties provide insights into partial viewport entry?
Are there any creative approaches within the library to track this without using Intersection Observer?

[piecyk]

Yes, on instance there is range property of type { startIndex: number; endIndex: number } | null it can be used to detect what is visible.

[shivam-bit]

Thanks i got it working using following logic

  const rangeRef = useRef<Range>({
    startIndex: 0,
    endIndex: 0,
    overscan: 0,
    count: 0,
  });
  const scrollWrapperRef = useRef<HTMLDivElement>(null);
  const rowVirtualizer = useVirtualizer({
    rangeExtractor: useCallback((range: Range) => {
      rangeRef.current = range;
      return defaultRangeExtractor(range);
    }, []),
  });
  

Then to check if item is in view

const isItemInView =
            item.index >= rangeRef.current.startIndex &&
            item.index <= rangeRef.current.endIndex;