fix(VInfiniteScroll): respect margin when root element is scrollable

fixes #17583
vuetifyjs · Aug 27, 2024 · b81919d · b81919d
1 parent 8af59fc
commit b81919d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.sass
@@ -9,7 +9,7 @@
 
     .v-infinite-scroll-intersect
       height: 100%
-      width: 1px
+      width: var(--v-infinite-margin-size, 1px)
 
   .v-infinite-scroll--vertical
     display: flex
@@ -20,6 +20,15 @@
       height: 1px
       width: 100%
 
+  .v-infinite-scroll-intersect
+    pointer-events: none
+    margin-top: var(--v-infinite-margin)
+    margin-bottom: calc(var(--v-infinite-margin) * -1)
+    &:nth-child(2) // TODO: "1 of &" would be more stable if structure changes
+      --v-infinite-margin: var(--v-infinite-margin-size, 1px)
+    &:nth-last-child(2)
+      --v-infinite-margin: calc(var(--v-infinite-margin-size, 1px) * -1)
+
   .v-infinite-scroll__side
     align-items: center
     display: flex

diff --git a/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx b/packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx
@@ -73,7 +73,6 @@ export const VInfiniteScrollIntersect = defineComponent({
       type: String as PropType<InfiniteScrollSide>,
       required: true,
     },
-    rootRef: null,
     rootMargin: String,
   },
 
@@ -82,17 +81,20 @@ export const VInfiniteScrollIntersect = defineComponent({
   },
 
   setup (props, { emit }) {
-    const { intersectionRef, isIntersecting } = useIntersectionObserver(entries => {
-    }, props.rootMargin ? {
-      rootMargin: props.rootMargin,
-    } : undefined)
+    const { intersectionRef, isIntersecting } = useIntersectionObserver()
 
     watch(isIntersecting, async val => {
       emit('intersect', props.side, val)
     })
 
     useRender(() => (
-      <div class="v-infinite-scroll-intersect" ref={ intersectionRef }>&nbsp;</div>
+      <div
+        class="v-infinite-scroll-intersect"
+        style={{
+          '--v-infinite-margin-size': props.rootMargin,
+        }}
+        ref={ intersectionRef }
+      >&nbsp;</div>
     ))
 
     return {}
@@ -264,24 +266,22 @@ export const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({
             { renderSide('start', startStatus.value) }
           </div>
 
-          { rootEl.value && hasStartIntersect && intersectMode && (
+          { hasStartIntersect && intersectMode && (
             <VInfiniteScrollIntersect
               key="start"
               side="start"
               onIntersect={ handleIntersect }
-              rootRef={ rootEl.value }
               rootMargin={ margin.value }
             />
           )}
 
           { slots.default?.() }
 
-          { rootEl.value && hasEndIntersect && intersectMode && (
+          { hasEndIntersect && intersectMode && (
             <VInfiniteScrollIntersect
               key="end"
               side="end"
               onIntersect={ handleIntersect }
-              rootRef={ rootEl.value }
               rootMargin={ margin.value }
             />
           )}