diff --git a/examples/state.tsx b/examples/state.tsx index 712d3b867..0cbb866af 100644 --- a/examples/state.tsx +++ b/examples/state.tsx @@ -1,6 +1,10 @@ import * as React from 'react' import { StateSnapshot, Virtuoso, VirtuosoHandle } from '../src' +function Header() { + return
Header
+} + export function Example() { const ref = React.useRef(null) const state = React.useRef(undefined) @@ -25,6 +29,9 @@ export function Example() { ref={ref} restoreStateFrom={state.current} computeItemKey={(key: number) => `item-${key.toString()}`} + components={{ + Header, + }} totalCount={100} itemContent={(index) =>
Item {index}
} style={{ height: 300 }} diff --git a/src/stateLoadSystem.ts b/src/stateLoadSystem.ts index b49ef34a9..1b14b6ecd 100644 --- a/src/stateLoadSystem.ts +++ b/src/stateLoadSystem.ts @@ -9,7 +9,7 @@ import { windowScrollerSystem } from './windowScrollerSystem' export const stateLoadSystem = u.system( ([ { sizes, sizeRanges }, - { scrollTop }, + { scrollTop, headerHeight }, { initialTopMostItemIndex }, { didMount }, { useWindowScroll, windowScrollContainerState, windowViewportRect }, @@ -24,12 +24,16 @@ export const stateLoadSystem = u.system( u.connect(windowViewportRect, statefulWindowViewportRect) u.subscribe( - u.pipe(getState, u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect)), - ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect]) => { + u.pipe( + getState, + u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect, headerHeight) + ), + ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect, headerHeight]) => { const ranges = sizeTreeToRanges(sizes.sizeTree) if (useWindowScroll && windowScrollContainerState !== null && windowViewportRect !== null) { scrollTop = windowScrollContainerState.scrollTop - windowViewportRect.offsetTop } + scrollTop -= headerHeight callback({ ranges, scrollTop }) } )