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.
MDN:
For some reasons the
offsetParentsometimes could be some other node, not the body (scroll container).Example (modify from the example code):
Would see some blank at the top of list.