wise-white

How to add gaps to the infinite scrolling list?

I have a simple infinite scrolling list (for ease mind it just a huge one-page list) and it's just the same as the docs example https://tanstack.com/virtual/v3/docs/guide/introduction With this useVirtualizer options

const options = {
  getScrollElement: () => scrollElementRef.current,
      count: totalRowsCount, // Total rows count from the react-table v8
      estimateSize: () => 40, // Row height including borders, with modified box-sizing to include borders into item exact size (content would be lesser if border thickness grows)
      overscan: 10,
};

const options = {
  getScrollElement: () => scrollElementRef.current,
      count: totalRowsCount, // Total rows count from the react-table v8
      estimateSize: () => 40, // Row height including borders, with modified box-sizing to include borders into item exact size (content would be lesser if border thickness grows)
      overscan: 10,
};

But whenever I've tried to add a gap like so:

const gap = 1;
    const gapPositionModifierFromStart = virtualRow.index * gap;
    const actualPositionY = virtualRow.start + gapPositionModifierFromStart;

//...

// StyledBodyRow it's just a div with display: flex
return (<StyledBodyRow
        key={row.id}
        role="row"
        onClick={() => onRowClick?.(row)}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          transform: `translateY(${actualPositionY}px)`,
        }}
      >
        {cells}
      </StyledBodyRow>)

const gap = 1;
    const gapPositionModifierFromStart = virtualRow.index * gap;
    const actualPositionY = virtualRow.start + gapPositionModifierFromStart;

//...

// StyledBodyRow it's just a div with display: flex
return (<StyledBodyRow
        key={row.id}
        role="row"
        onClick={() => onRowClick?.(row)}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          transform: `translateY(${actualPositionY}px)`,
        }}
      >
        {cells}
      </StyledBodyRow>)

virtual list starting increasing its offset from top of the visible List rectangle (each item I scroll than each gap of the scrolled list would be added to such offset) It results into hiding my virtual list completely at some point when offset = visible List rectangle (see attached screenshot) How can I add gaps without this weird behaviour?

Introduction | TanStack Table Docs

TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte and Solid. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation. T...

3 Replies

wise-whiteOP•3y ago

Well, it become possible when adding paddingTop and increasing estimateHeight

extended-salmon•3y ago

I think that the easiest way to add gaps between the items is to increase their size - to include the gaps in the items

fair-rose•3y ago

Yes, i would also include the gap in item.

Gaming

Programming

How to add gaps to the infinite scrolling list?

Did you find this page helpful?