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