`offsetTop/Left` is sometimes wrong for getting the offset between container and body

[meowtec]

MDN:

The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

For some reasons the offsetParent sometimes could be some other node, not the body (scroll container).

Example (modify from the example code):

 <>
  <nav
+  style={{
+    padding: '200px 0',
+  }}
  >
    {lists.map((list) => (
      <button key={list} onClick={() => setSelected(list)}>
        {list}
      </button>
    ))}
  </nav>

+ <div style={{ position: 'absolute', width: '100%' }}>
    {selected === 'Fixed List' && <FixedSizeList />}
    {selected === 'Variable List' && <VariableSizeList />}
    {selected === 'Fixed Grid' && <FixedSizeGrid />}
    {selected === 'Variable Grid' && <VariableSizeGrid />}
+ </div>
</>

Would see some blank at the top of list.

[meowtec]

Workaround using overscanCount={N}

[VasiliyBP]

Have same issue. This library working well only if list outside other 'relative' or 'absolute' container.

[vaasu-dhand-als]

Workaround using overscanCount={N}

@meowtec, what's N here?

[meowtec]

Workaround using overscanCount={N}

@meowtec, what's N here?

N is an arbitrary number, like 4 5 or 6. Make sure that N * itemHeight be greater than padding.