fix(v-intersect): auto-detect scrollable ancestor as root

packages/vuetify/src/directives/intersect/index.ts

@@ -20,6 +20,32 @@ export interface ObserveDirectiveBinding extends Omit<DirectiveBinding, 'modifie
   }
 }
 
+// Elements with display:contents have no layout box; IntersectionObserver cannot observe them.
+// Walk down to the first child that has a real box.
+function getObservableEl (el: HTMLElement): HTMLElement {
+  if (getComputedStyle(el).display === 'contents') {
+    for (let i = 0; i < el.children.length; i++) {
+      const child = el.children[i]
+      if (child instanceof HTMLElement) return getObservableEl(child)
+    }
+  }
+  return el
+}
+
+const scrollableRE = /auto|scroll/
+
+function getScrollableAncestor (el: HTMLElement): HTMLElement | null {
+  let parent = el.parentElement
+  while (parent && parent !== document.documentElement && parent !== document.body) {
+    const { overflow, overflowY, overflowX } = getComputedStyle(parent)
+    if (scrollableRE.test(overflow + overflowY + overflowX)) {
+      return parent
+    }
+    parent = parent.parentElement
+  }
+  return null
+}
+
 function mounted (el: HTMLElement, binding: ObserveDirectiveBinding) {
   if (!SUPPORTS_INTERSECTION) return
 
@@ -29,17 +55,22 @@ function mounted (el: HTMLElement, binding: ObserveDirectiveBinding) {
     ? value
     : { handler: value, options: {} }
 
+  const resolvedOptions: IntersectionObserverInit = {
+    ...options,
+    root: options?.root !== undefined
+      ? options.root
+      : getScrollableAncestor(el),
+  }
+
   const observer = new IntersectionObserver((
     entries: IntersectionObserverEntry[] = [],
     observer: IntersectionObserver
   ) => {
     const _observe = el._observe?.[binding.instance!.$.uid]
-    if (!_observe) return // Just in case, should never fire
+    if (!_observe) return
 
     const isIntersecting = entries.some(entry => entry.isIntersecting)
 
-    // If is not quiet or has already been
-    // initted, invoke the user callback
     if (
       handler && (
         !modifiers.quiet ||
@@ -55,19 +86,21 @@ function mounted (el: HTMLElement, binding: ObserveDirectiveBinding) {
 
     if (isIntersecting && modifiers.once) unmounted(el, binding)
     else _observe.init = true
-  }, options)
+  }, resolvedOptions)
 
   el._observe = Object(el._observe)
-  el._observe![binding.instance!.$.uid] = { init: false, observer }
 
-  observer.observe(el)
+  const target = getObservableEl(el)
+  el._observe![binding.instance!.$.uid] = { init: false, observer, target }
+
+  observer.observe(target)
 }
 
 function unmounted (el: HTMLElement, binding: ObserveDirectiveBinding) {
   const observe = el._observe?.[binding.instance!.$.uid]
   if (!observe) return
 
-  observe.observer.unobserve(el)
+  observe.observer.unobserve(observe.target ?? el)
   delete el._observe![binding.instance!.$.uid]
 }
 

packages/vuetify/src/globals.d.ts

@@ -37,6 +37,7 @@ declare global {
     _observe?: Record<number, {
       init: boolean
       observer: IntersectionObserver
+      target?: HTMLElement
     } | undefined>
     _mutate?: Record<number, {
       observer: MutationObserver