1---
2category: Elements
3---
4 
5# useIntersectionObserver
6 
7Detects that a target element's visibility.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useIntersectionObserver } from '@vueuse/core'
14import { shallowRef, useTemplateRef } from 'vue'
15 
16const target = useTemplateRef('target')
17const targetIsVisible = shallowRef(false)
18 
19const { stop } = useIntersectionObserver(
20  target,
21  ([entry], observerElement) => {
22    targetIsVisible.value = entry?.isIntersecting || false
23  },
24)
25</script>
26 
27<template>
28  <div ref="target">
29    <h1>Hello world</h1>
30  </div>
31</template>
32```
33 
34## Directive Usage
35 
36```vue
37<script setup lang="ts">
38import { vIntersectionObserver } from '@vueuse/components'
39import { shallowRef, useTemplateRef } from 'vue'
40 
41const root = useTemplateRef('root')
42 
43const isVisible = shallowRef(false)
44 
45function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
46  isVisible.value = entry?.isIntersecting || false
47}
48</script>
49 
50<template>
51  <div>
52    <p>
53      Scroll me down!
54    </p>
55    <div v-intersection-observer="onIntersectionObserver">
56      <p>Hello world!</p>
57    </div>
58  </div>
59 
60  <!-- with options -->
61  <div ref="root">
62    <p>
63      Scroll me down!
64    </p>
65    <div v-intersection-observer="[onIntersectionObserver, { root }]">
66      <p>Hello world!</p>
67    </div>
68  </div>
69</template>
70```
71 
72[IntersectionObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
73 
74## Type Declarations
75 
76```ts
77export interface UseIntersectionObserverOptions extends ConfigurableWindow {
78  /**
79   * Start the IntersectionObserver immediately on creation
80   *
81   * @default true
82   */
83  immediate?: boolean
84  /**
85   * The Element or Document whose bounds are used as the bounding box when testing for intersection.
86   */
87  root?: MaybeComputedElementRef | Document
88  /**
89   * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
90   */
91  rootMargin?: MaybeRefOrGetter<string>
92  /**
93   * Either a single number or an array of numbers between 0.0 and 1.
94   * @default 0
95   */
96  threshold?: number | number[]
97}
98export interface UseIntersectionObserverReturn extends Supportable, Pausable {
99  stop: () => void
100}
101/**
102 * Detects that a target element's visibility.
103 *
104 * @see https://vueuse.org/useIntersectionObserver
105 * @param target
106 * @param callback
107 * @param options
108 */
109export declare function useIntersectionObserver(
110  target:
111    | MaybeComputedElementRef
112    | MaybeRefOrGetter<MaybeElement[]>
113    | MaybeComputedElementRef[],
114  callback: IntersectionObserverCallback,
115  options?: UseIntersectionObserverOptions,
116): UseIntersectionObserverReturn
117```
118