fix(VVirtualScroll): use a dynamic window size, cache offsets (#18392)

fixes #18198 fixes #17801
vuetifyjs · Nov 1, 2023 · 8a71a7d · 8a71a7d
1 parent 3ffe9c5
commit 8a71a7d
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 71 deletions.
diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
@@ -62,7 +62,9 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
     const { dimensionStyles } = useDimension(props)
     const {
       containerRef,
+      markerRef,
       handleScroll,
+      handleScrollend,
       handleItemResize,
       scrollToIndex,
       paddingTop,
@@ -71,13 +73,23 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
     } = useVirtual(props, toRef(props, 'items'))
 
     useToggleScope(() => props.renderless, () => {
+      function handleListeners (add = false) {
+        const method = add ? 'addEventListener' : 'removeEventListener'
+
+        if (containerRef.value === document.documentElement) {
+          document[method]('scroll', handleScroll, { passive: true })
+          document[method]('scrollend', handleScrollend)
+        } else {
+          containerRef.value?.[method]('scroll', handleScroll, { passive: true })
+          containerRef.value?.[method]('scrollend', handleScrollend)
+        }
+      }
+
       onMounted(() => {
         containerRef.value = getScrollParent(vm.vnode.el as HTMLElement, true)
-        containerRef.value?.addEventListener('scroll', handleScroll)
-      })
-      onScopeDispose(() => {
-        containerRef.value?.removeEventListener('scroll', handleScroll)
+        handleListeners(true)
       })
+      onScopeDispose(handleListeners)
     })
 
     useRender(() => {
@@ -93,7 +105,7 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
 
       return props.renderless ? (
         <>
-          <div class="v-virtual-scroll__spacer" style={{ paddingTop: convertToUnit(paddingTop.value) }} />
+          <div ref={ markerRef } class="v-virtual-scroll__spacer" style={{ paddingTop: convertToUnit(paddingTop.value) }} />
           { children }
           <div class="v-virtual-scroll__spacer" style={{ paddingBottom: convertToUnit(paddingBottom.value) }} />
         </>
@@ -104,13 +116,15 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
             'v-virtual-scroll',
             props.class,
           ]}
-          onScroll={ handleScroll }
+          onScrollPassive={ handleScroll }
+          onScrollend={ handleScrollend }
           style={[
             dimensionStyles.value,
             props.style,
           ]}
         >
           <div
+            ref={ markerRef }
             class="v-virtual-scroll__container"
             style={{
               paddingTop: convertToUnit(paddingTop.value),

diff --git a/packages/vuetify/src/components/VVirtualScroll/__tests__/VVirtualScroll.spec.cy.tsx b/packages/vuetify/src/components/VVirtualScroll/__tests__/VVirtualScroll.spec.cy.tsx
@@ -20,7 +20,7 @@ describe('VVirtualScroll', () => {
       </VVirtualScroll>
     ))
 
-    cy.get('.v-virtual-scroll__item').should('have.length', 30)
+    cy.get('.v-virtual-scroll__item').should('have.length.above', 10).should('have.length.below', 50)
   })
 
   it('reuses the same elements', () => {