Make virtualization compatible with overflow:scroll on document/body. F…

…ixes #37659
dotnet · Jun 28, 2022 · 2b36530 · 2b36530
1 parent 07edd3c
commit 2b36530
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/Components/Web.JS/dist/Release/blazor.server.js b/src/Components/Web.JS/dist/Release/blazor.server.js
diff --git a/src/Components/Web.JS/dist/Release/blazor.webview.js b/src/Components/Web.JS/dist/Release/blazor.webview.js
diff --git a/src/Components/Web.JS/src/Virtualize.ts b/src/Components/Web.JS/src/Virtualize.ts
@@ -9,7 +9,11 @@ export const Virtualize = {
 const observersByDotNetId = {};
 
 function findClosestScrollContainer(element: HTMLElement | null): HTMLElement | null {
-  if (!element) {
+  // If we recurse up as far as body or the document root, return null so that the
+  // IntersectionObserver observes intersection with the top-level scroll viewport
+  // instead of the with body/documentElement which can be arbitrarily tall.
+  // See https://github.com/dotnet/aspnetcore/issues/37659 for more about what this fixes.
+  if (!element || element === document.body || element === document.documentElement) {
     return null;
   }
 

diff --git a/src/Components/test/testassets/BasicTestApp/VirtualizationTable.razor b/src/Components/test/testassets/BasicTestApp/VirtualizationTable.razor
@@ -18,6 +18,11 @@
     </tbody>
 </table>
 
+<style>
+    /* Represents https://github.com/dotnet/aspnetcore/issues/37659 */
+    html, body { overflow-y: scroll }
+</style>
+
 @code {
     List<int> fixedItems = Enumerable.Range(0, 1000).ToList();
 }