diff --git a/examples/test-case-722.tsx b/examples/test-case-722.tsx new file mode 100644 index 000000000..602e31d23 --- /dev/null +++ b/examples/test-case-722.tsx @@ -0,0 +1,87 @@ +import * as React from 'react' +import { useState } from 'react' +import { Virtuoso } from '../src' + +const TOTAL_COUNT = 233 +const PAGE_COUNT = 30 + +// scroll up to 143, should load as expected. - https://github.com/petyosi/react-virtuoso/issues/722 +const SHORT_IDX = { + 13: true, + 20: true, + 22: true, + 26: true, + 43: true, + + 99: true, + 100: true, + 101: true, + 102: true, + 103: true, + 104: true, + 105: true, + 106: true, + 107: true, + 108: true, + + 109: true, + 110: true, + 111: true, + 112: true, + 113: true, + 114: true, + 115: true, + 116: true, + 117: true, + 118: true, + 121: true, + 122: true, + 123: true, + 124: true, + 125: true, + 127: true, + 128: true, + 129: true, + 136: true, + 141: true, + 142: true, + 143: true, + 144: true, + 145: true, + + 151: true, + 152: true, + 157: true, + 159: true, + 158: true, + + 160: true, + 161: true, + 162: true, + 182: true, +} + +export default function App() { + const [loadedCount, setLoadedCount] = useState(PAGE_COUNT) + + const prepend = () => { + setTimeout(() => { + if (loadedCount < TOTAL_COUNT) setLoadedCount(loadedCount + PAGE_COUNT > TOTAL_COUNT ? TOTAL_COUNT : loadedCount + PAGE_COUNT) + }, 250) + } + + return ( +
+ { + return
{index}
+ }} + /> +
+ ) +} diff --git a/src/hooks/useChangedChildSizes.ts b/src/hooks/useChangedChildSizes.ts index 1287714df..c7b8e9e8d 100644 --- a/src/hooks/useChangedChildSizes.ts +++ b/src/hooks/useChangedChildSizes.ts @@ -19,17 +19,31 @@ export default function useChangedListContentsSizes( scrollableElement = scrollableElement.parentElement! } + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + const windowScrolling = (scrollableElement.firstElementChild! as HTMLDivElement).dataset['viewportType']! === 'window' + const scrollTop = customScrollParent ? customScrollParent.scrollTop - : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - (scrollableElement.firstElementChild! as HTMLDivElement).dataset['viewportType']! === 'window' + : windowScrolling ? window.pageYOffset || document.documentElement.scrollTop : scrollableElement.scrollTop + const scrollHeight = customScrollParent + ? customScrollParent.scrollHeight + : windowScrolling + ? document.documentElement.scrollHeight + : scrollableElement.scrollHeight + + const viewportHeight = customScrollParent + ? customScrollParent.offsetHeight + : windowScrolling + ? window.innerHeight + : scrollableElement.offsetHeight + scrollContainerStateCallback({ scrollTop: Math.max(scrollTop, 0), - scrollHeight: (customScrollParent ?? scrollableElement).scrollHeight, - viewportHeight: (customScrollParent ?? scrollableElement).offsetHeight, + scrollHeight, + viewportHeight, }) gap?.(resolveGapValue('row-gap', getComputedStyle(el).rowGap, log))