feat(useIntersectionObserver): make rootMargin reactive (#4934)

doyuli · ilyaliao · 9romise · web-flow · commit 53abedf02a6b · 2025-12-10T03:23:23.000Z
Co-authored-by: IlyaL &lt;ilyaliao324@gmail.com&gt;
Co-authored-by: Vida Xie &lt;vida_2020@163.com&gt;
diff --git a/packages/core/useIntersectionObserver/demo.vue b/packages/core/useIntersectionObserver/demo.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core'
-import { shallowRef, useTemplateRef } from 'vue'
+import { computed, shallowRef, useTemplateRef } from 'vue'
 
 const root = useTemplateRef('root')
 const target = useTemplateRef('target')
 const isVisible = shallowRef(false)
 
+const rootMarginTop = shallowRef(0)
+const rootMarginRight = shallowRef(0)
+const rootMarginBottom = shallowRef(0)
+const rootMarginLeft = shallowRef(0)
+const rootMargin = computed(() => `${rootMarginTop.value || 0}px ${rootMarginRight.value || 0}px ${rootMarginBottom.value || 0}px ${rootMarginLeft.value || 0}px`)
+
 const { isActive, pause, resume } = useIntersectionObserver(
   target,
   ([entry]) => {
     isVisible.value = entry?.isIntersecting || false
   },
-  { root },
+  { root, rootMargin },
 )
 </script>
 
@@ -25,6 +31,34 @@ const { isActive, pause, resume } = useIntersectionObserver(
       <span>Enable</span>
     </label>
   </div>
+  <note class="mb-2">
+    {{ `RootMargin: ${rootMargin}` }}
+  </note>
+  <div
+    grid="~ cols-4 "
+    gap-2
+  >
+    <input
+      v-model="rootMarginTop"
+      type="text"
+      placeholder="Top"
+    >
+    <input
+      v-model="rootMarginRight"
+      type="text"
+      placeholder="Right"
+    >
+    <input
+      v-model="rootMarginBottom"
+      type="text"
+      placeholder="Bottom"
+    >
+    <input
+      v-model="rootMarginLeft"
+      type="text"
+      placeholder="Left"
+    >
+  </div>
   <div ref="root" class="root">
     <p class="notice">
       Scroll me down!
diff --git a/packages/core/useIntersectionObserver/index.ts b/packages/core/useIntersectionObserver/index.ts
@@ -24,7 +24,7 @@ export interface UseIntersectionObserverOptions extends ConfigurableWindow {
   /**
    * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
    */
-  rootMargin?: string
+  rootMargin?: MaybeRefOrGetter<string>
 
   /**
    * Either a single number or an array of numbers between 0.0 and 1.
@@ -53,7 +53,7 @@ export function useIntersectionObserver(
 ): UseIntersectionObserverReturn {
   const {
     root,
-    rootMargin = '0px',
+    rootMargin,
     threshold = 0,
     window = defaultWindow,
     immediate = true,
@@ -70,8 +70,8 @@ export function useIntersectionObserver(
 
   const stopWatch = isSupported.value
     ? watch(
-        () => [targets.value, unrefElement(root as MaybeComputedElementRef), isActive.value] as const,
-        ([targets, root]) => {
+        () => [targets.value, unrefElement(root as MaybeComputedElementRef), toValue(rootMargin), isActive.value] as const,
+        ([targets, root, rootMargin]) => {
           cleanup()
           if (!isActive.value)
             return
