fix: consistent viewport reports for window mode

Fixes #722
petyosi · Jul 30, 2022 · a846a39 · a846a39
1 parent 30aaca3
commit a846a39
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 4 deletions.
diff --git a/examples/test-case-722.tsx 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 (
+    <div className="App">
+      <Virtuoso
+        startReached={prepend}
+        useWindowScroll
+        overscan={0}
+        firstItemIndex={TOTAL_COUNT - loadedCount}
+        totalCount={loadedCount}
+        itemContent={(index) => {
+          return <div style={{ height: SHORT_IDX[index] ? '15px' : '150px' }}>{index}</div>
+        }}
+      />
+    </div>
+  )
+}
diff --git 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))