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,
};

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>)

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...

How to add gaps to the infinite scrolling list?

Similar Threads

Similar Threads

Similar Threads